瀑布流也应该算是流行几年了吧。首先是由Pinterest掀起的浪潮，然后国内设计如雨后春笋般，冒出很多瀑布流的例子，比如，蘑菇街，Mark之(不过最近涉黄，好像被喝茶了),还有淘宝的 “哇哦”. 这些都是很棒的例子， 今天我想重新谈起瀑布流，一是想满足我自己的愿望，写一个详细的介绍(不敢自名为教程),二是，给大家一份参考，因为search很多，但是他们给的是一个插件，然后教你怎样配置，当然，也有很多其他的大神也细心的做了很多教程，比如 imooc上面 Amy 姐姐 发布的瀑布流教程，也是很棒的。 而我的目的就是，尽量把一些常见的demo给大家讲解一遍，以及，融合以前学过的设计模式，相当于一个简单的demo.
绝对式布局
不多说，先看一个demo
js
var cal = (function() { "use strict"; var $ = function() { return document.querySelectorAll.apply(document, arguments); } var arrHeight = []; //得到分列的高度 var columns = function() { //计算页面最多可以放多少列 var bodyW = document.body.clientWidth, pinW = $(".pin")[0].offsetWidth; return Math.floor(bodyW / pinW); } var getIndex = function(arr) { //获得最小高度的index var minHeight = Math.min.apply(null, arr); //获得最小高度 for (var i in arr) { if (arr[i] === minHeight) { return i; } } } //根据列数确定第一排img的高度并放入数组当中。 var setWidth = function() { //通过列数设置宽度 var col = columns(), //获得最后一列 main = $('#main')[0]; //获得罩层 main.style.width = col * $('.pin')[0].offsetWidth + "px"; } var overLoad = function(ele) { var index = getIndex(arrHeight), minHeight = Math.min.apply(null, arrHeight), //获取最小高度 pins = $('.pin'), style = ele.style; style.position = "absolute"; style.top = minHeight + "px"; //设置当前元素的高度 style.left = pins[index].offsetLeft + "px"; arrHeight[index] += ele.offsetHeight; } var init = function() { var pins = $(".pin"), col = columns(); setWidth(); //设置包裹容器的宽度 for (var i = 0, pin; pin = pins[i]; i++) { if (i < col) { //存储第一排的高度 arrHeight.push(pin.offsetHeight); } else { overLoad(pin); //将元素的位置重排 } } } window.onload = init; //...执行自动更新操作。 //添加当，滚动到一定位置的时候，添加html节点. //得到最低高度和序号,获得临界位置 //模仿加载数据 var dataInt = [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }, { 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }]; function isLoad() { //是否可以进行加载 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop, wholeHeight = document.documentElement.clientHeight || document.body.clientHeight, point = scrollTop + wholeHeight; //页面底部距离header的距离 var arr = $('.pin'); var lastHei = arr[arr.length - 1].getBoundingClientRect().top; return (lastHei < point) ? true : false; } var dealScroll = (function() { var main = $('#main')[0], flag = true; return function() { console.log("trigger"); if (isLoad() && flag) { for (var i = 0, data; data = dataInt[i++];) { var div = document.createElement('div'); div.innerHTML = temp(data.src); div.className = "pin"; main.appendChild(div); overLoad(div); //和上面的overload有耦合性质 } flag = false; setTimeout(function() { //控制滑行手速，时间越长对速度的滑动时间影响越大。 flag = true; }, 1000); } } })(); window.addEventListener('scroll', function() { dealScroll(); }, false); function temp(src) { return ` <div> <img src="https://cued.xunlei.com/demos/publ/img/P_00${src}"/> </div> `; } })();
CSS
$font:10px/1.5 sans-serif,"Microsoft YaHei","Arial"; html{ height: 100%; width: 100%; font:$font; } #main{ position: relative; &::after{ display:block; content:''; clear:both; } } .pin{ padding: 15px 0 0 15px; float:left; } .box{ padding: 10px; border:1px solid #ccc; box-shadow: 0 0 6px #ccc; border-radius: 5px; } .box img{ width:162px; height:auto; }
HTML
<div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_001.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_002.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_003.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_004.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_005.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_006.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_007.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_008.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_009.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_010.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_011.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_012.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_013.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_014.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_015.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_016.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_017.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_018.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_019.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_020.jpg" /> </div> </div> <div> <div> <img src="https://cued.xunlei.com/demos/publ/img/P_021.jpg" /> </div> </div> </div> <script type="text/javascript" src="https://www.jb51.net/article/dist/index.entry.js"></script>