瀑布流佈局

時間 2019-12-12

原文原文鏈接

摘要：

　　瀑布流佈局已經很早就流行起來了，最近項目中用到了，就整理了下。最先使用的是pinterest（https://www.pinterest.com/），在國內最多見的就是淘寶了（http://guang.taobao.com/），蘑菇街了（http://www.mogujie.com/book/clothing/）等等。本文主要爲了說明兩點，一個是如何實現瀑布流，另外一個就是瀑布流佈局。html

瀑布流原理：

　　瀑布流是爲了解決一次性加載數據比較慢而設計的。其原理相似於數據列表分頁，可是事件對象不同，一個是click事假，另外一個是mousescroll事件。瀑布流是當用戶滾動必定距離時向服務端請求數據加載進來。下面是一個瀑布流的Demo：jquery

  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>

瀑布流佈局：

　　有兩種樣式的佈局，一種像蘑菇街這種高寬固定的web

　　另外一種就像淘寶高度不統一的ajax

對於上面那種高寬都統一的，有幾種實現方式：服務器

將各列固定寬度，而且左浮動就能夠了
絕對定位

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值，後面將分享幾款相似這種佈局的插件。app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。