瀑布流布局已经很早就流行起来了，最近项目中用到了，就整理了下。最早使用的是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='+page103 })104 .done(function() {105 //和本地模拟处理一样106 });107 }108 </script>109 </body>110 </html>有两种样式的布局，一种像蘑菇街这种高宽固定的
另一种就像淘宝高度不统一的
对于上面那种高宽都统一的，有几种实现方式：
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 瀑布流布局128 </div>29 <div>30 瀑布流布局231 </div>32 <div>33 瀑布流布局334 </div>35 <div>36 瀑布流布局437 </div>38 <div>39 瀑布流布局540 </div>41 <div>42 瀑布流布局643 </div>44 <div>45 瀑布流布局746 </div>47 <div>48 瀑布流布局849 </div>50 <div>51 瀑布流布局952 </div>53 </div>54 </body>55 </html>对于淘宝高度不统一的布局需要用js来计算当前元素的left和top值，后面将分享几款类似这种布局的插件。
新闻热点
疑难解答
