JS 瀑布流佈局

時間 2019-11-17

原文原文鏈接

瀑布流佈局css

HTMLhtml

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>瀑布流佈局</title>
  6         <link rel="stylesheet" href="css/style.css">
  7         <script src="js/script.js"></script>
  8     </head>
  9     <body>
 10         <div id="main">
 11             <div class="box">
 12                 <div class="picture">
 13                     <img src="http://upload.ct.youth.cn/2014/0930/1412033104340.jpg"/>
 14                 </div>
 15             </div>
 16             <div class="box">
 17                 <div class="picture">
 18                     <img src="http://p5.qhimg.com/t010668db2acce1395d.jpg"/>
 19                 </div>
 20             </div>
 21             <div class="box">
 22                 <div class="picture">
 23                     <img src="http://www.cnr.cn/newscenter/kjxw/200911/W020091103393137864029.jpg"/>
 24                 </div>
 25             </div>
 26             <div class="box">
 27                 <div class="picture">
 28                     <img src="http://img01.cztv.com/201607/27/77b8b4c5ac3accc9a3423ea3875d4893.jpg"/>
 29                 </div>
 30             </div>
 31             <div class="box">
 32                 <div class="picture">
 33                     <img src="http://img.newyx.net/article/image/201607/30/ca0fd38253.jpg"/>
 34                 </div>
 35             </div>
 36             <div class="box">
 37                 <div class="picture">
 38                     <img src="http://image.sowm.cn/bmyiUz.jpg"/>
 39                 </div>
 40             </div>
 41             <div class="box">
 42                 <div class="picture">
 43                     <img src="http://res.kaifu.com/isy/upload/ueditor/image/20130415/lk566j2jyvrk7fjc.jpg"/>
 44                 </div>
 45             </div>
 46             <div class="box">
 47                 <div class="picture">
 48                     <img src="http://img.131.com/www/2009/09/12/090912132110343f.jpg"/>
 49                 </div>
 50             </div>
 51             <div class="box">
 52                 <div class="picture">
 53                     <img src="http://content.52pk.com/files/110608/309295_100802_12_lit.jpg"/>
 54                 </div>
 55             </div>
 56             <div class="box">
 57                 <div class="picture">
 58                     <img src="http://img.article.pchome.net/00/22/68/63/pic_lib/s960x639/058s960x639.jpg"/>
 59                 </div>
 60             </div>
 61             <div class="box">
 62                 <div class="picture">
 63                     <img src="http://p14.qhimg.com/t01a21395c7bf8821d2.jpg"/>
 64                 </div>
 65             </div>
 66             <div class="box">
 67                 <div class="picture">
 68                     <img src="http://www.8090yxs.com/uploads/allimg/131115/1-1311150922531W.png"/>
 69                 </div>
 70             </div>
 71             <div class="box">
 72                 <div class="picture">
 73                     <img src="http://i-3.497.com/2016/8/11/KDYwMHgpW3dtOjEucG5nLHI6MTMsYjoxM10=/53842181-6952-4107-88a7-e517e7379516.jpg"/>
 74                 </div>
 75             </div>
 76             <div class="box">
 77                 <div class="picture">
 78                     <img src="http://img.article.pchome.net/00/23/91/23/pic_lib/s960x639/16s960x639.jpg"/>
 79                 </div>
 80             </div>
 81             <div class="box">
 82                 <div class="picture">
 83                     <img src="http://wow.tgbus.com/UploadFiles_2396/200911/20091125174839312.jpg"/>
 84                 </div>
 85             </div>
 86             <div class="box">
 87                 <div class="picture">
 88                     <img src="http://pic1.duowan.com/wow/0810/89136647188/89136850739.jpg"/>
 89                 </div>
 90             </div>
 91             <div class="box">
 92                 <div class="picture">
 93                     <img src="http://games.enet.com.cn/jzimages/s1085035731.jpg"/>
 94                 </div>
 95             </div>
 96             <div class="box">
 97                 <div class="picture">
 98                     <img src="http://images.17173.com/2015/news/2015/09/02/mj0902df04s.jpg"/>
 99                 </div>
100             </div>
101             <div class="box">
102                 <div class="picture">
103                     <img src="http://attachments.gfan.com/forum/201412/10/2248245jjjm1mqmjt7tpqp.jpg"/>
104                 </div>
105             </div>
106             <div class="box">
107                 <div class="picture">
108                     <img src="http://wow.tgbus.com/UploadFiles_2396/201201/20120111095302802.jpg"/>
109                 </div>
110             </div>
111             <div class="box">
112                 <div class="picture">
113                     <img src="http://img13.360buyimg.com/n1/g14/M01/09/0E/rBEhV1IB88oIAAAAAAH6XMiLSv4AAB2MgLhPaIAAfp0038.jpg"/>
114                 </div>
115             </div>
116             <div class="box">
117                 <div class="picture">
118                     <img src="http://gameonline.yesky.com/imagelist/2008/178/2c6x847vix14s.jpg"/>
119                 </div>
120             </div>
121             <div class="box">
122                 <div class="picture">
123                     <img src="http://content.battlenet.com.cn/wow/media/wallpapers/fan-art/wallpaper19/wallpaper19-1920x1080.jpg"/>
124                 </div>
125             </div>
126             <div class="box">
127                 <div class="picture">
128                     <img src="http://img1.pcgames.com.cn/pcgames/1011/11/2056569_11.jpg"/>
129                 </div>
130             </div>
131             <div class="box">
132                 <div class="picture">
133                     <img src="http://digital.365jia.cn/uploads/11/1101/4eaf41afa75f5.jpg"/>
134                 </div>
135             </div>
136             <div class="box">
137                 <div class="picture">
138                     <img src="http://pic3.duowan.com/newgame/1004/134672767363/134672885615.jpg"/>
139                 </div>
140             </div>
141             <div class="box">
142                 <div class="picture">
143                     <img src="http://pic38.nipic.com/20140211/17980863_114404420113_2.jpg"/>
144                 </div>
145             </div>
146             <div class="box">
147                 <div class="picture">
148                     <img src="http://a1.att.hudong.com/86/67/19300533955596133455676114775_950.jpg"/>
149                 </div>
150             </div>
151             <div class="box">
152                 <div class="picture">
153                     <img src="http://pic.5442.com/2013/0208/07/06.jpg"/>
154                 </div>
155             </div>
156             <div class="box">
157                 <div class="picture">
158                     <img src="http://upload.520apk.com/news/20141108/47241415426601.jpg"/>
159                 </div>
160             </div>
161             <div class="box">
162                 <div class="picture">
163                     <img src="http://pic.3h3.com/up/2014-3/20143322221321031444.jpg"/>
164                 </div>
165             </div>
166         </div>
167     </body>
168 </html>

View Code

HTML中的圖片要足夠多，撐出滾動條，JS中的滾輪事件纔會觸發。 jquery

CSSgit

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 #main {
 7     position: relative;
 8 }
 9 
10 .box {
11     padding: 15px 0 0 15px;
12     float: left;
13 }
14 
15 .picture {
16     padding: 10px;
17     border: 1px solid #aaa;
18     border-radius: 10px;
19     box-shadow: 0 0 1px #ccc, 0 0 2px #ccc; 
20 }
21 
22 img {
23     width: 150px;
24     height: auto;
25 }

View Code

img元素定寬以後，高度要設置爲auto，不然在IE中有bug。 web

JavaScript實現瀑布流佈局ajax

  1 window.onload = function() {
  2     waterfall();
  3     //JSON數據
  4     var dataInt = {"date":[{"src":"http://content.52pk.com/files/080602/75_174348_lit.jpg"},
  5                            {"src":"http://att.bbs.duowan.com/forum/201203/24/0614146ddnfohpzggg3bgg.jpg"},
  6                            {"src":"http://u_www.cbigame.com/upload/images/20131225/13879516099458.jpg"},
  7                            {"src":"http://att.bbs.duowan.com/forum/month_1007/20100722_8dab40e9c17d1a236050IVlW0OQy2KM2.jpg"},
  8                            {"src":"http://pic.baike.soso.com/p/20140331/20140331152345-1045965841.jpg"},
  9                            {"src":"http://pic3.duowan.com/wow/0808/83006073078/83006290437.jpg"},
 10                            {"src":"http://att.bbs.duowan.com/forum/201303/07/13221633zcz881uwn88ppc.jpg"}]};
 11     //添加事件，動態加載數據塊
 12     window.onscroll = function() {
 13         if(checkScrollSlide()) {
 14             //將數據塊渲染到頁面
 15             var main = document.getElementById("main");
 16             //遍歷JSON數據，動態加載
 17             for (var i = 0; i < dataInt.date.length; i++) {
 18                 var box = document.createElement("div");
 19                 box.className = "box";
 20                 main.appendChild(box);
 21                 var picture = document.createElement("div");
 22                 picture.className = "picture";
 23                 box.appendChild(picture);
 24                 var image = document.createElement("img");
 25                 image.src = dataInt.date[i].src;
 26                 picture.appendChild(image);
 27             }
 28         }
 29         //動態加載的數據塊也須要瀑布流佈局
 30         waterfall();
 31     }
 32 }
 33 
 34 //瀑布流佈局函數
 35 function waterfall() {
 36     //取得全部在id爲main的div下的class值爲box的元素
 37     var boxs = getByClass("box", "main");
 38     //取得元素的寬度
 39     var box_width = boxs[0].offsetWidth;
 40     //取得瀏覽器的寬度，計算每一行的列數，向下取整
 41     var columns = Math.floor(document.documentElement.clientWidth / box_width);
 42     //取得id爲main的元素，設置其寬度，讓其居中
 43     var main = document.getElementById("main");
 44     main.style.width = columns * box_width + "px";
 45     main.style.margin = "0 auto";
 46     //定義一個數組，用於存放每一列的高度
 47     //這個數組首先保存第一行全部圖片的高度
 48     var hArr = [];
 49     for (var i = 0; i < boxs.length; i++) {
 50         if(i < columns) {
 51             hArr.push(boxs[i].offsetHeight);
 52         } else {
 53             var minH = Math.min.apply(null, hArr);
 54             var index = getIndex(minH, hArr);
 55             boxs[i].style.position = "absolute";
 56             boxs[i].style.top = minH + "px";
 57             // boxs[i].style.left = box_width * index + "px";
 58             boxs[i].style.left = boxs[index].offsetLeft + "px";
 59             //更新hArr數組的值
 60             hArr[index] += boxs[i].offsetHeight;
 61 
 62         }
 63     }
 64 
 65 }
 66 //要查找的元素的className和父元素的id
 67 function getByClass(className, parent_id) {
 68     var parent = document.getElementById(parent_id) || document;
 69     var elements = parent.getElementsByTagName("*");
 70     var eles = [];
 71     for (var i = 0; i < elements.length; i++) {
 72         if(elements[i].className ===className) {
 73             eles.push(elements[i]);
 74         }
 75     }
 76     return eles;
 77 }
 78 
 79 function getIndex(element, array) {
 80     //數組的indexOf()是ECMAScript5新增，IE9+才支持
 81     if(array.indexOf) {
 82         var index = array.indexOf(element);
 83         return index;
 84     } else {
 85         for(i in array) {
 86             if(array[i] === element) {
 87                 return i;
 88             }
 89         }
 90     }
 91 }
 92 
 93 //檢測是否具有滾動加載數據塊的條件
 94 function checkScrollSlide() {
 95     var main = document.getElementById("main");
 96     var boxs = getByClass("box", "main");
 97     //最後一個數據塊的中間位置距離頁面頂部的距離
 98     var last_box_H = boxs[boxs.length - 1].offsetTop + Math.floor(boxs[boxs.length - 1].offsetHeight / 2);
 99     //頁面滾動的距離
100     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
101     //頁面可視區域的高度
102     var client_height = document.documentElement.clientHeight || document.body.clientHeight;
103     //比較最後一個數據塊距離頁面頂部的距離是否小於頁面滾動的距離加上頁面可視區域的高度，若是小於則返回true
104     return (last_box_H < scrollTop + client_height) ? true : false;
105 }

View Code

scroll事件須要添加到window上，若是添加到document上，IE8及以前版本沒有效果。api

動態添加的數據塊有限，可是卻能無限加載，緣由未知。。。數組

jQuery實現瀑布流佈局瀏覽器

 1 $(document).ready(function() {
 2     waterfall();
 3     var dataInt = {"data":[{"src":"http://content.52pk.com/files/080602/75_174348_lit.jpg"},
 4                            {"src":"http://att.bbs.duowan.com/forum/201203/24/0614146ddnfohpzggg3bgg.jpg"},
 5                            {"src":"http://u_www.cbigame.com/upload/images/20131225/13879516099458.jpg"},
 6                            {"src":"http://att.bbs.duowan.com/forum/month_1007/20100722_8dab40e9c17d1a236050IVlW0OQy2KM2.jpg"},
 7                            {"src":"http://pic.baike.soso.com/p/20140331/20140331152345-1045965841.jpg"},
 8                            {"src":"http://pic3.duowan.com/wow/0808/83006073078/83006290437.jpg"},
 9                            {"src":"http://att.bbs.duowan.com/forum/201303/07/13221633zcz881uwn88ppc.jpg"}]};
10     $(window).scroll(function() {
11         if(checkScrollSlide()) {
12             $.each(dataInt.data, function(key, value) {
13                 var box = $("<div>").addClass("box").appendTo($("#main"));
14                 var picture = $("<div>").addClass("picture").appendTo($(box));
15                 $("<img>").attr("src",$(value).attr("src")).appendTo($(picture));
16             })
17             waterfall();
18         }
19     }) 
20 });
21 
22 function waterfall() {
23     var boxs = $("#main .box");
24     var box_w = boxs.eq(0).outerWidth();
25     var colomns = Math.floor($(window).width() / box_w);
26     $("#main").width(box_w*colomns).css("margin","0 auto");
27     var hArr = [];
28     boxs.each(function(index, value) {
29         var box_h = boxs.eq(index).outerHeight();
30         if(index < colomns) {
31             hArr.push(box_h);
32         } else {
33             var minH = Math.min.apply(null, hArr);
34             var minH_index = $.inArray(minH, hArr);
35             $(value).css({
36                 "position":"absolute",
37                 "top":minH + "px",
38                 "left":minH_index*box_w + "px" 
39             })
40             hArr[minH_index] += boxs.eq(index).outerHeight();
41         }
42     })
43 
44 }
45 
46 function checkScrollSlide() {
47     var last_box = $("#main .box").last();
48     var box_h = last_box.offset().top + Math.floor(last_box.outerHeight() / 2);
49     var scrollTop = $(window).scrollTop();
50     var client_h = $(window).height();
51     return (box_h < scrollTop + client_h) ? true : false;
52 }

View Code

https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.jsapp

與原生JS思路同樣，只是寫法不一樣，代碼量少一半。。。

CSS3多欄佈局

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 .box {
 7     padding: 15px 0 0 15px;
 8 }
 9 
10 .picture {
11     width: 150px;
12     padding: 10px;
13     border: 1px solid #aaa;
14     border-radius: 10px;
15     box-shadow: 0 0 1px #ccc, 0 0 2px #ccc; 
16 }
17 
18 img {
19     width: 150px;
20     height: auto;
21     display: block;
22 }
23 
24 /*CSS3實現多欄佈局*/
25 #main {
26     -webkit-column-width: 187px;
27     -moz-column-width: 187px;
28     -o-column-width: 187px;
29     -ms-column-width: 187px;
30 }