广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >怎么用CSS3实现css多兰瀑布流效果
  • 912
分享到

怎么用CSS3实现css多兰瀑布流效果

css3 2022-10-19 07:10:48 912人浏览 安东尼
摘要

本篇内容介绍了“怎么用css3实现CSS多兰瀑布流效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!CSS

本篇内容介绍了“怎么用css3实现CSS多兰瀑布流效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

CSS 多栏(Multi-column) : Http://www.w3chtml.com/css3/properties/multi-column/

Properties
属性
CSS Version
版本
Inherit From Parent
继承性
Description
简介
columnsCSS3CSS3 columns 属性,是复合属性,设置或检索对象的列数和每列的宽度。
column-widthCSS3CSS3 column-width 属性,设置或检索对象每列的宽度
column-countCSS3CSS3 column-count 属性,设置或检索对象的列数
column-gapCSS3CSS3 column-gap 属性,设置或检索对象的列与列之间的间隙
column-ruleCSS3CSS3 column-rule 属性,是复合属性。设置或检索对象的列与列之间的边框。
column-rule-widthCSS3CSS3 column-rule-width 属性,设置或检索对象的列与列之间的边框厚度。
column-rule-styleCSS3CSS3 column-rule-style 属性,设置或检索对象的列与列之间的边框样式。
column-rule-colorCSS3CSS3 column-rule-color 属性,设置或检索对象的列与列之间的边框颜色。
column-spanCSS3CSS3 column-span 属性,设置或检索对象元素是否横跨所有列。
column-fillCSS3CSS3 column-fill 属性,设置或检索对象所有列的高度是否统一。
column-break-beforeCSS3CSS3 column-break-before 属性,设置或检索对象之前是否断行。
column-break-afterCSS3CSS3 column-break-after 属性,设置或检索对象之后是否断行。
column-break-insideCSS3CSS3 column-break-inside 属性,设置或检索对象内部是否断行。

先来写一个简单的图片页面

代码如下:


<html>
   <head>
       <link rel="stylesheet" type="text/css" href="css/main.css">
       <script type="text/javascript" src="../lib/Jquery/jquery-1.11.1.min.js"></script>
   </head>
   <body>
       <div id="main">
           <div class="box">
               <div class="pic">
                   <img src="">
               </div>
           </div>
           <div class="box">
               <div class="pic">
                   <img src="">
               </div>
           </div>
           <!-- 这里省略多个class为box的div-->
           <div class="box">
               <div class="pic">
                   <img src="">
               </div>
           </div>
       </div>
   </body>
   <script type="text/javascript">
       var width = 300, height = 300;
       $('.box img').each(function(){
           // 随机图片的高宽,如果大小一样,就没必要用瀑布流了
           width = Math.floor(Math.random() * 100) + 300;
           height = Math.floor(Math.random() * 500) + 300;
           $(this).attr('src', 'http://jb51.net/'+ height +'/' + width);
       });
   </script>
</html>

假设,宽和高都是350,生成链接为http://jb51.net/350/350,访问这个link就会得到一张350X350的可爱的小猫图片~~O(&cap;_&cap;)O~~

然后,添加相应的CSS即可

代码如下:


* {
 padding: 0;
 margin: 0;
}
#main {
 -WEBkit-column-count: 4;
 -moz-column-count: 4;
 column-count: 4;
 -moz-column-gap:20px;
 -webkit-column-gap:20px;
 column-gap:20px;
 padding: 10px;
}
.box {
 padding: 15px;
 border: solid 2px #eeeeee;
 border-radius: 4px;
 margin-bottom: 15px;
 cursor: pointer;
}
.box img {
 width: 100%;
}

其中的 column-count 代表分成几列,column-gap 代表列和列之间的宽度,你可以根据自己的需要调整。我们还可以使用 column-width 来定义列宽。

这样就完成了,是不是很简单~~

最后效果图如下

怎么用CSS3实现css多兰瀑布流效果

“怎么用CSS3实现css多兰瀑布流效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: 怎么用CSS3实现css多兰瀑布流效果

本文链接: https://www.lsjlt.com/news/77344.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 怎么用CSS3实现css多兰瀑布流效果
    本篇内容介绍了“怎么用CSS3实现css多兰瀑布流效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!CSS...
    99+
    2022-10-19
    css3
  • css和js如何实现瀑布流效果
    小编给大家分享一下css和js如何实现瀑布流效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JS是什么JS是JavaScript的简称,它是一种直译式的脚本语言...
    99+
    2023-06-09
  • 使用js实现瀑布流效果
    本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下 源码: <!DOCTYPE html> <html lang="en"> &...
    99+
    2022-11-12
    js 瀑布流
  • 纯css怎么实现瀑布流
    这篇文章主要介绍了纯css怎么实现瀑布流,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   1.multi-column多列布局实现瀑布流...
    99+
    2022-10-19
    css
  • 使用CSS3怎么实现一个瀑布流布局
    使用CSS3怎么实现一个瀑布流布局?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。掌握点:column-count 把div中的文本分为多少列column-width 规定列宽c...
    99+
    2023-06-08
  • 如何使用jquery.masonry实现瀑布流效果
    这篇文章给大家分享的是有关如何使用jquery.masonry实现瀑布流效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、分别加载jquery插件与jquery.masonr...
    99+
    2022-10-19
    jquery
  • 怎么在css3中利用column实现卡片瀑布流布局
    这篇文章将为大家详细讲解有关怎么在css3中利用column实现卡片瀑布流布局,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。相关属性column-count:想实现的列数,我这里只需要2列c...
    99+
    2023-06-08
  • HTML5怎么实现图片无限加载的瀑布流效果
    本篇内容主要讲解“HTML5怎么实现图片无限加载的瀑布流效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5怎么实现图片无限加载的瀑布流效果”吧!代码如...
    99+
    2022-10-19
    html5
  • HTML5怎样实现图片无限加载瀑布流效果
    这篇文章主要介绍了HTML5怎样实现图片无限加载瀑布流效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。代码如下:<!DOCTYPE&...
    99+
    2022-10-19
    html5
  • 怎么在HTML5中使用canvas实现一个瀑布流文字效果
    今天就跟大家聊聊有关怎么在HTML5中使用canvas实现一个瀑布流文字效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。代码如下:<!doctype html>...
    99+
    2023-06-09
  • CSS3怎么实现流星雨效果
    小编给大家分享一下CSS3怎么实现流星雨效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!说明:正文只讲述单个流星雨的实现方式,多个的效果只需要对单个的动画起始点...
    99+
    2023-06-14
  • 怎么用JS实现网页瀑布流布局
    这篇文章主要介绍怎么用JS实现网页瀑布流布局,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!JS是什么JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分...
    99+
    2023-06-14
  • js怎么实现无限加载自适应屏幕瀑布流图片效果
    这篇文章主要讲解了“js怎么实现无限加载自适应屏幕瀑布流图片效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“js怎么实现无限加载自适应屏幕瀑布流图片效果”...
    99+
    2022-10-19
    js
  • Android怎么使用RecyclerView实现瀑布流界面
    今天小编给大家分享一下Android怎么使用RecyclerView实现瀑布流界面的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2023-07-05
  • CSS3怎么实现多背景展示效果
    本篇内容介绍了“CSS3怎么实现多背景展示效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!代码如下:&l...
    99+
    2022-10-19
    css3
  • 怎么用CSS3实现阴影效果
    这篇文章主要讲解了“怎么用CSS3实现阴影效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用CSS3实现阴影效果”吧!  &nbs...
    99+
    2022-10-19
    css3
  • CSS怎么实现三列布局网页效果
    本篇内容介绍了“CSS怎么实现三列布局网页效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!这是一个比较常...
    99+
    2022-10-19
    css
  • 怎么使用css3实现多列布局
    这篇文章主要介绍了怎么使用css3实现多列布局的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用css3实现多列布局文章都会有所收获,下面我们一起来看看吧。具体使用示例:首先创建一个html文件。在html...
    99+
    2023-07-04
  • 怎么使用CSS3实现阴影效果
    这篇文章给大家分享的是有关怎么使用CSS3实现阴影效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1、这是html 简单的有一个标签或者盒子都可以代码如下:<div cl...
    99+
    2022-10-19
    css3
  • 怎么用css3实现照片墙效果
    本篇内容介绍了“怎么用css3实现照片墙效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一张张照片散乱的...
    99+
    2022-10-19
    css3
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作