CSS3的学习--实现瀑布流

基于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的学习--实现瀑布流

CSS3的学习--实现瀑布流的更多相关文章

css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
css3多列及瀑布流效果
css3内容分块,多列效果(类似报纸版块排版): .div02{ /*count:内容分为几列,gap:内容与分割线的距离,rule:分割线样式*/ column-count:; column-gap ...
web前端学习笔记-瀑布流的算法分析与代码实现
瀑布流效果目前应用很广泛,像花瓣,新浪轻博,蘑菇街,美丽说等好多网站都有.也有好多支持该效果的前段框架,今天学习了一下这种效果的实现,不依赖插件,自己动手分析实现过程,为了便于叙述清楚,分析中的一些名 ...
vuejs和webpack项目（VueComponent）初尝试——瀑布流组件
碎碎念: 好久不见,最近自己有些懈怠没更过多少博,主要原因之一是对自己学习方式的一些思考,翻看之前的博客多是记录学习笔记这反映出了自己对于前端还停留在学习-复习知识点的阶段压根没多少实践经验啊 ...
分别用js和css实现瀑布流
下午查找了瀑布流的相关原理,找了一些css3实现的还有js实现的,最后总结了一些比较简单的,易懂的整理起来 1.css3实现只要运用到 column-count分列 column-width固 ...
CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
瀑布流的三种实现方式（原生js+jquery+css3）
前言项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...
jquery/原生js/css3 实现瀑布流以及下拉底部加载
思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...
自定义UICollectionLayout布局 —— UIKit之学习UICollectionView记录一《瀑布流》
一.思路思路一:比较每一行所有列的cell的高度,从上到下(也就是从第一行开始),从最短的开始计算,(记录下b的高度和索引,从开始计算,依次类推) 思路二:设置上.下.左.右间距和行间距.列间距及列 ...

随机推荐

qt如何实现一个渐隐窗口呢（开启的时候他是从上往下渐渐显示）
qt如何实现一个渐隐窗口呢?就是比如说开启的时候他是从上往下渐渐显示的,关闭的时候从下往上渐渐小时的http://*.com/questions/19087822/how-to ...
No Hibernate Session bound to thread, and configuration does not allow creat
No Hibernate Session bound to thread, and configuration does not allow creat 今天遇到这么一个错误,在网上差了很多都没有能解 ...
[转]在 SQL Server 2008 中新建用户登录并指定该用户的数据库
提要:我在 SQL Server 中新建用户登录时,出现了三种错误,错误代码分别是 18456.15128.4064 ----------------------------------- 正文 ...
无插件VIM编程技巧(网摘)
无插件VIM编程技巧原文出处:[陈皓 coolshell] 相信大家看过<简明Vim教程>也玩了<Vim大冒险>的游戏了,相信大家对Vim都有一个好的入门了.我在这里把我日常 ...
UICollectionView请求网络数据显示(Text)
TEXT: AppDelegate.m self.window.rootViewController = [[[UINavigationController alloc]initWithRootVie ...
Silverlight/WPF 系列汇总
Silverlight 解谜游戏系列 -- Silverlight 3 · Silverlight 解谜游戏之一新建项目 · Silverlight 解谜游戏之二创建题板 · Silverli ...
ant自动编译打包android项目
源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/antdemo.zip Android打包APK的流程如下: 下面我们开始尝试使用ant进行ap ...
python 全栈开发，Day139(websocket原理,flask之请求上下文)
昨日内容回顾 flask和django对比 flask和django本质是一样的,都是web框架. 但是django自带了一些组件,flask虽然自带的组件比较少,但是它有很多的第三方插件. 那么在什 ...
python 微信机器人，微信自动回复
使用python现成的模块 itchat,可以实现,微信机器人的自动回复其内部原理,是模拟了web版微信的登录,然后进行消息的接收发送,并不是只能用python实现,其他后端语言都可以做到下面是使 ...
sql server数据导入导出方法统计
常用的数据量不是很大的情况的几种方法:转载地址 http://www.cnblogs.com/changbluesky/archive/2010/06/23/1761779.html 大数据量的推荐导 ...