基于CSS3实现瀑布流，使用CSS3的CSS 多栏(Multi-column)。

可以到github上下载源码 : https://github.com/CraryPrimitiveMan/waterfall-css3

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。我们只是实现了多栏的布局。

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

Properties
属性		 CSS Version
版本		 Inherit From Parent
继承性		 Description
简介
columns CSS3 无 CSS3 columns 属性，是复合属性，设置或检索对象的列数和每列的宽度。
column-width CSS3 无 CSS3 column-width 属性，设置或检索对象每列的宽度
column-count CSS3 无 CSS3 column-count 属性，设置或检索对象的列数
column-gap CSS3 无 CSS3 column-gap 属性，设置或检索对象的列与列之间的间隙
column-rule CSS3 无 CSS3 column-rule 属性，是复合属性。设置或检索对象的列与列之间的边框。
column-rule-width CSS3 无 CSS3 column-rule-width 属性，设置或检索对象的列与列之间的边框厚度。
column-rule-style CSS3 无 CSS3 column-rule-style 属性，设置或检索对象的列与列之间的边框样式。
column-rule-color CSS3 无 CSS3 column-rule-color 属性，设置或检索对象的列与列之间的边框颜色。
column-span CSS3 无 CSS3 column-span 属性，设置或检索对象元素是否横跨所有列。
column-fill CSS3 无 CSS3 column-fill 属性，设置或检索对象所有列的高度是否统一。
column-break-before CSS3 无 CSS3 column-break-before 属性，设置或检索对象之前是否断行。
column-break-after CSS3 无 CSS3 column-break-after 属性，设置或检索对象之后是否断行。
column-break-inside CSS3 无 CSS3 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://placekitten.com/'+ height +'/' + width);

        });

    </script>

</html>

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

然后，添加相应的CSS即可

* {

  padding:;

  margin:;

}

#main {

  -webkit-column-count:;

  -moz-column-count:;

  column-count:;

  -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的学习--实现瀑布流的更多相关文章

  1. css3多列布局瀑布流加载样式

    看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...

  2. css3多列及瀑布流效果

    css3内容分块,多列效果(类似报纸版块排版): .div02{ /*count:内容分为几列,gap:内容与分割线的距离,rule:分割线样式*/ column-count:; column-gap ...

  3. web前端学习笔记-瀑布流的算法分析与代码实现

    瀑布流效果目前应用很广泛,像花瓣,新浪轻博,蘑菇街,美丽说等好多网站都有.也有好多支持该效果的前段框架,今天学习了一下这种效果的实现,不依赖插件,自己动手分析实现过程,为了便于叙述清楚,分析中的一些名 ...

  4. vuejs和webpack项目（VueComponent）初尝试——瀑布流组件

    碎碎念:     好久不见,最近自己有些懈怠没更过多少博,主要原因之一是对自己学习方式的一些思考,翻看之前的博客多是记录学习笔记这反映出了自己对于前端还停留在学习-复习知识点的阶段压根没多少实践经验啊 ...

  5. 分别用js和css实现瀑布流

    下午查找了瀑布流的相关原理,找了一些css3实现的还有js实现的,最后总结了一些比较简单的,易懂的整理起来 1.css3实现 只要运用到    column-count分列 column-width固 ...

  6. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  7. 瀑布流的三种实现方式（原生js+jquery+css3）

    前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...

  8. jquery/原生js/css3 实现瀑布流以及下拉底部加载

    思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...

  9. 自定义UICollectionLayout布局 —— UIKit之学习UICollectionView记录一《瀑布流》

    一.思路 思路一:比较每一行所有列的cell的高度,从上到下(也就是从第一行开始),从最短的开始计算,(记录下b的高度和索引,从开始计算,依次类推) 思路二:设置上.下.左.右间距和行间距.列间距及列 ...

随机推荐

  1. php tools for visual studio 2013 完美 破解 Cracker

    PHP Tools for Visual Studio 2013,这个是 目前在 Visual Studio 2010/2012/2013 中 下最好用的php插件了,  破解 好的 Cracker  ...

  2. oracle创建视图

    create or replace view view_fwaqjcjl as select T_FWAQJCJL.FWAQJCJL_ID,T_FWAQJCJL.ZCBM,T_FWAQJCJL.FWB ...

  3. 萝卜白菜，给有所爱——C#和JAVA都会终将被时代淘汰

    看到园子里又有一波试图掀起C#和JAVA的谁更好的争论,对于这些一直不断的争论,我觉得实在没有必要,黑格尔的存在即合理,中国的老古语说的萝卜白菜各有所爱,大家争论的再多其实卵用也没用,还不如趁着闲暇时 ...

  4. CCNA第二章TCP/IP简介考试要点学习笔记

    1.描述网络是如何工作的     DoD过程/应用层 -- OSI应用.表示和会话层(定义了结点到结点的应用通信协议以及对用户界面规范的控制): DoD主机到主机层 -- OSI传输层(保证了数据包的 ...

  5. 《利用Python进行数据分析》第5章学习笔记

    pandas入门 数据结构 Series Series是一种类似于一维数组的对象,它由一组数据(各种NumPy数据类型)以及一组与之相关的数据标签(即索引)组成.仅由一组数据即可产生最简单的Serie ...

  6. Amazon RDS MySQL数据库还原时 log_bin_trust_function_creators 错误解决办法

    使用了Amazon AWS EC2免费云空间,数据库实例采用Amazon RDS.原来在Windows Server上有一个存在大量数据的MySQL数据库.现在需要在Amazon RDS上还原这个My ...

  7. Websocket全讲解。跨平台的通讯协议 ！！基于websocket的高并发即时通讯服务器开发。

    本博文,保证不用装B的话语和太多专业的语言,保证简单易懂,只要懂JAVAEE开发的人都可以看懂. 本博文发表目的是,目前网上针对Websocket的资料太散乱,导致初学者的知识体系零零散散,学习困难加 ...

  8. WPF，Silverlight与XAML读书笔记第四十七 - Silverlight与浏览器

    说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 这部分内容主要介绍Silverlight与浏 ...

  9. 【WEB】Tomcat基础使用知识

    由于当前项目性质原因,从开始到现在使用的WEB服务器都是WAS,而Tomcat的基础知识也慢慢地被遗忘.由于种种原因,让我参与到了另外一个全新的项目,使用的是Tomcat6.X,所以复习是必须的,而写 ...

  10. [转]quick-cocos2d-x 多分辨率适配详解

    http://cn.quick-x.com/?p=1436 多种分辨率的适配一直都是一个蛋疼的问题,各家公司可能都有自己的一套方案.今天我为大家介绍的是我们在多款游戏里实践后的解决方案,相对来说成本和 ...