JS 瀑布流布局

瀑布流布局

HTML

  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中的滚轮事件才会触发。

CSS

 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。

JavaScript实现瀑布流布局

  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及之前版本没有效果。

动态添加的数据块有限，但是却能无限加载，原因未知。。。

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.js

与原生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 }

View Code

图片的排列顺序为从上到下，从左到右，与一般情况下的排列顺序不同。

IE10+支持这个属性。