zoukankan      html  css  js  c++  java

  • 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+支持这个属性。
  • 相关阅读:
    收集座右铭
    Yii2查询语句使用不等于号
    使用jQuery获取Bootstrap Switch的值
    wamp 提示 Directive allow_call_time_pass_reference is no longer avaiable in PHP
    解决GitHub添加sshkey仍然无法访问clone远程仓库的问题
    异常-User class threw exception: java.lang.IllegalStateException: Cannot call methods on a stopped SparkContext.
    CDH5.16.1升级kafka0.10到1.0.1
    MacOs桌面自动被打乱的原因
    彻底解决MacOS上应用程序快捷键冲突的问题，自定义快捷键设置
    CDH5.16.1的maven依赖版本查询地址
  • 原文地址：https://www.cnblogs.com/cc156676/p/5774052.html
Copyright © 2011-2022 走看看