基于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. Bookstore project using XAMPP 详细配置 Part 3

    3. Create PHP 1) “Sublime Text” is used as text editor. 2) HTML part of “hello.php” was created as s ...

  2. 【OC简介-类和对象】

    OC与C语言相比,体现的是一种面向对象的思想.OC完全兼容C语言 OC中大多数类前面都有前缀NS,来源于乔布斯NextStep团队,被苹果收购后保留了所有基本语法,合并到Foundation中 OC语 ...

  3. I/O优化篇

    转载:http://blog.csdn.net/gzh0222/article/details/9227393 很不错 1.系统学习 IO性能对于一个系统的影响是至关重要的.一个系统经过多项优化以后, ...

  4. FreeRTOS和Ucos在任务优先级的区别

    而ucos的任务优先级是任务优先级的数组越小,任务优先级越高.和STM32的中断优先级保持一样的分析,和freeRTOS相反.

  5. UNET学习笔记1 - 总览

    UNET为两类人设计: (1)使用Unity开发简单多人在线游戏.这类用户可以从NetworkManager或者the High Level API开始: (2)开发复杂多人在线游戏或者开发网络服务. ...

  6. json 对c++类的序列化(自动生成代码)

    [动机] 之前写网络协议的时候,使用的是google protobuf,protobuf不但在性能和扩展性上有很好的优势,protoc自动生成c++类代码的工具,这点确实给程序员带来了很多便利. 做后 ...

  7. Linux搭建Scrapy爬虫集成开发环境

    安装Python 下载地址:http://www.python.org/, Python 有 Python 2 和 Python 3 两个版本, 语法有些区别,ubuntu上自带了python2.7. ...

  8. 排序 via F#

    冒泡排序: let rec bsort_asc s = let rec _bsort_asc = function |x1::x2::xs when x1 > x2 -> match _b ...

  9. 阿里巴巴-OS事业群-OS手机事业部-系统服务部门招聘Java开发工程师，有意者请进来

    我是阿里巴巴-OS事业群-OS手机事业部-系统服务部的开发工程师,正在招聘Java开发工程师. 以下是职位描述: 岗位名称:Java开发工程师 招聘人数:5人 生效日期:2014-03-12 结束日期 ...

  10. 在.net中使用aquiles访问Cassandra(四)

    数据的持久化我们都已经完成了,和所有应有程序一样,最重要的是要向用户展示数据.下面我们就推出这部分代码,读取任意行任何列: public IList<TRowResult> Execute ...