摘要：
瀑布流布局已经很早就流行起来了，最近项目中用到了，就整理了下。最早使用的是pinterest（https://www.pinterest.com/），在国内最常见的就是淘宝了（http://guang.taobao.com/），蘑菇街了（http://www.mogujie.com/book/clothing/）等等。本文主要为了说明两点，一个是如何实现瀑布流，另一个就是瀑布流布局。
瀑布流原理：
瀑布流是为了解决一次性加载数据比较慢而设计的。其原理类似于数据列表分页，但是事件对象不一样，一个是click事假，另一个是mousescroll事件。瀑布流是当用户滚动一定距离时向服务端请求数据加载进来。下面是一个瀑布流的Demo：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <style> 6 .content { 7 width: 230px; 8 height: 300px; 9 margin: 0 auto; 10 border: 1px solid; 11 overflow-y: auto; 12 } 13 .content ul li { 14 list-style: none; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="content"> 20 <ul id="list"> 21 <li> 22 这是一条模拟数据 23 </li> 24 <li> 25 这是一条模拟数据 26 </li> 27 <li> 28 这是一条模拟数据 29 </li> 30 <li> 31 这是一条模拟数据 32 </li> 33 <li> 34 这是一条模拟数据 35 </li> 36 <li> 37 这是一条模拟数据 38 </li> 39 <li> 40 这是一条模拟数据 41 </li> 42 <li> 43 这是一条模拟数据 44 </li> 45 <li> 46 这是一条模拟数据 47 </li> 48 <li> 49 这是一条模拟数据 50 </li> 51 <li> 52 这是一条模拟数据 53 </li> 54 <li> 55 这是一条模拟数据 56 </li> 57 <li> 58 这是一条模拟数据 59 </li> 60 <li> 61 这是一条模拟数据 62 </li> 63 <li> 64 这是一条模拟数据 65 </li> 66 <li> 67 这是一条模拟数据 68 </li> 69 <li> 70 这是一条模拟数据 71 </li> 72 <li> 73 这是一条模拟数据 74 </li> 75 <li> 76 这是一条模拟数据 77 </li> 78 <li> 79 这是一条模拟数据 80 </li> 81 </ul> 82 </div> 83 <script src="js/jquery.min.js"></script> 84 <script> 85 $(".content").scroll(function() { 86 //滚动到距离底部h高度时加载 87 var h = 269,i=0; 88 //滚动条距离底部还有多少像素的时候加载 89 console.log($("#list").height() - $(".content").scrollTop()); 90 if ($("#list").height() - $(".content").scrollTop() < h) { 91 // 如果请求服务器端数据,执行下面这段代码,传入的参数代表页数 92 /*remoteload(++i);*/ 93 //如果是本地模拟，执行下面代码 94 for(var j = 0; j < 10; j++) { 95 $('<li>这是一条模拟数据</li>').appendTo($('#list')); 96 } 97 } 98 }); 99 100 function remoteload(page) { 101 $.ajax({ 102 url: 你的接口+'?page='+page 103 }) 104 .done(function() { 105 //和本地模拟处理一样 106 }); 107 } 108 </script> 109 </body> 110 </html>
瀑布流布局：
有两种样式的布局，一种像蘑菇街这种高宽固定的
另一种就像淘宝高度不统一的
对于上面那种高宽都统一的，有几种实现方式：
- 将各列固定宽度，并且左浮动就可以了
- 绝对定位
- CSS3，如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <style> 6 #content { 7 -webkit-column-count: 3; /* 列数 */ 8 -webkit-column-gap: 20px; /* 列间隔 */ 9 -webkit-column-rule: 1px solid red; /* 间隔边线 */ 10 -webkit-column-width: 150px; /* 列宽 */ 11 12 -moz-column-count: 3; 13 -moz-column-gap: 20px; 14 -moz-column-rule: 1px solid red; 15 -moz-column-width: 150px; 16 17 column-count: 3; 18 column-gap: 20px; 19 column-rule: 1px solid red; 20 column-width: 150px; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="content"> 26 <div> 27 瀑布流布局1 28 </div> 29 <div> 30 瀑布流布局2 31 </div> 32 <div> 33 瀑布流布局3 34 </div> 35 <div> 36 瀑布流布局4 37 </div> 38 <div> 39 瀑布流布局5 40 </div> 41 <div> 42 瀑布流布局6 43 </div> 44 <div> 45 瀑布流布局7 46 </div> 47 <div> 48 瀑布流布局8 49 </div> 50 <div> 51 瀑布流布局9 52 </div> 53 </div> 54 </body> 55 </html>
对于淘宝高度不统一的布局需要用js来计算当前元素的left和top值，后面将分享几款类似这种布局的插件。