css3属性多列column瀑布流效果
最近看了一个视频，看到了css3 中colum属性
现在就来讲讲column属性，
- column-count
- column-gap
- column-rule
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本不支持多列属性。
column-count 属性规定元素应该被分隔的列数：
把 div 元素中的文本分隔为6列：
div
{
-moz-column-count:6; /* Firefox */
-webkit-column-count:6; /* Safari 和 Chrome */
column-count:6;
}column-gap 属性规定列之间的间隔：
规定列之间 5 像素的间隔：
div
{
-moz-column-gap:5px; /* Firefox */
-webkit-column-gap:5px; /* Safari 和 Chrome */
column-gap:5px;
}column-rule 属性设置列之间的宽度、样式和颜色规则。
规定列之间的宽度、样式和颜色规则：
div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}华丽的分割线
下面就奔入主题，用column多列来写个瀑布流效果的
下面代码中，就放了一些好看的图片 😀 😀
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>css属性column瀑布流效果</title>
<script type="text/javascript" src="//cdn.blyoo.com/js/jquery-2.1.4.min.js"></script>
<style type="text/css">
.img {
column-gap: 5px;
-webkit-column-gap: 5px;
-webkit-column-count: 6;
column-count: 6;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="img">
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388222_OWKHEBXUROLIFCYVSOLBZPFVLBRHXND.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388250_CCIJCJBRHXOEUKAQGWMCSIYOMCSIYOEUKAQGWMC.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388266_PUXFVLBRHXNDTJZPFVLJZPFVLBRIYOFCYV.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388282_OAYOJGDAWTQNKOLIFCYVSPMJGDAWT.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388297_UQYVAWTQNKHFVLBRHXNDTJHXNDTJZPFVLBRHXOEU.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388313_GYOWMCSIYOEUKAQGWUKAQG.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388327_FZLMDXFVLBRHXNDTJZPFVLBRHXNDTJIYOM.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388343_YLUROLIFCYDAWTQNKHEBX.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388358_FCBCHLIFCYDAWTQNKHEBXUROFVLBRHXNDTJZPFV.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388375_MWFVLBRHXOEUKAQGWMCSIYOEUKAQGWM.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388390_ZLROEDTJZPFVLBRHXNDTJZPF.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388405_AYHXVDTJAQIFCGDAWTQN.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388421_TXGSPMJGDAWTQNROLIFCY.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388468_LYKKUMJGDAWTQNRNVLBRHXNDTJZPFVLBRHXNDTJZ.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388483_WAMNHWGWMCSIYOEUKAQGWMCSIY.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388501_LXSBRHXNLBRHXNDTJZPFVLBRHX.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388514_FUVCWTQNKHEBXUROLIFJGDAWTQ.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388530_RBVSPMJGDAWTQUROLIFCYPFVLBRHX.jpg" />
<img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388546_NXZPFVLBRHXNDTJZQGWMCSIYWMCSIYOE.jpg" />
</div>
<!--下面就用jquery写个无限加载的-->
<script>
$(function () {
$(window).scroll(function () {
if (($(this).scrollTop() + $(this).outerHeight()) > ($(document).outerHeight()-10)) {
$('.img').append($('.img').html())
};
});
})
</script>
</body>
</html>
