jQuery实现瀑布流布局
【算法】：假定每张图片的宽度相同，高度不同。首先算出每一排能容纳几张照片，也就是有几列。
排布好第一行后，找出这一行高度最短的那一张照片，将下一张照片插入到那张最短照片的下放。
【代码实现】
html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>瀑布流布局</title> 5 <meta charset="utf-8"/> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 <script type="text/javascript" src="jQuery/jquery.js"></script> 8 <script type="text/javascript" src="photoFall.js"></script> 9 </head> 10 <body> 11 <div id="main"> 12 <div class="box"> 13 <div class="pic"> 14 <img class="img" src="new/1.png"> 15 </div> 16 </div> 17 <div class="box"> 18 <div class="pic"> 19 <img class="img" src="new/2.png"> 20 </div> 21 </div> 22 <div class="box"> 23 <div class="pic"> 24 <img src="new/3.png"> 25 </div> 26 </div> 27 <div class="box"> 28 <div class="pic"> 29 <img src="new/4.png"> 30 </div> 31 </div> 32 <div class="box"> 33 <div class="pic"> 34 <img src="new/5.png"> 35 </div> 36 </div> 37 <div class="box"> 38 <div class="pic"> 39 <img src="new/6.png"> 40 </div> 41 </div> 42 <div class="box"> 43 <div class="pic"> 44 <img src="new/7.png"> 45 </div> 46 </div> 47 <div class="box"> 48 <div class="pic"> 49 <img src="new/8.png"> 50 </div> 51 </div> 52 <div class="box"> 53 <div class="pic"> 54 <img src="new/9.png"> 55 </div> 56 </div> 57 <div class="box"> 58 <div class="pic"> 59 <img src="new/10.png"> 60 </div> 61 </div> 62 <div class="box"> 63 <div class="pic"> 64 <img src="new/11.png"> 65 </div> 66 </div> 67 <div class="box"> 68 <div class="pic"> 69 <img src="new/12.png"> 70 </div> 71 </div> 72 <div class="box"> 73 <div class="pic"> 74 <img src="new/13.png"> 75 </div> 76 </div> 77 <div class="box"> 78 <div class="pic"> 79 <img src="new/14.png"> 80 </div> 81 </div> 82 <div class="box"> 83 <div class="pic"> 84 <img src="new/15.png"> 85 </div> 86 </div> 87 <div class="box"> 88 <div class="pic"> 89 <img src="new/16.png"> 90 </div> 91 </div> 92 <div class="box"> 93 <div class="pic"> 94 <img src="new/17.png"> 95 </div> 96 </div> 97 <div class="box"> 98 <div class="pic"> 99 <img src="new/18.png"> 100 </div> 101 </div> 102 <div class="box"> 103 <div class="pic"> 104 <img src="new/19.png"> 105 </div> 106 </div> 107 <div class="box"> 108 <div class="pic"> 109 <img src="new/20.png"> 110 </div> 111 </div> 112 <div class="box"> 113 <div class="pic"> 114 <img src="new/21.png"> 115 </div> 116 </div> 117 <div class="box"> 118 <div class="pic"> 119 <img src="new/22.png"> 120 </div> 121 </div> 122 <div class="box"> 123 <div class="pic"> 124 <img src="new/23.png"> 125 </div> 126 </div> 127 <div class="box"> 128 <div class="pic"> 129 <img src="new/24.png"> 130 </div> 131 </div> 132 133 </div> 134 </body> 135 </html>
css：
*{ padding: 0px; margin: 0px; } .main{ position: relative; } .box{ padding: 15px 0px 0px 15px; float: left; } .pic{ padding:10px; border:1px solid #ccc; box-shadow: 0 0 5px#cccccc; border-radius: 5px; } .pic img{ width: 165px; height: auto; }
JS
/** * Created by Forri on 2016/12/8. */ $(window).on('load',function () { waterFall(); }) function waterFall(){ var $boxs = $('#main>div'); //获取box var photoWidth = $boxs.eq(0).outerWidth();//获取照片宽度 var photoNum =Math.floor( $(window).width() / photoWidth ); //得到列数 $('#main').width(photoNum * photoWidth).css('margin','auto'); var hArr = []; $boxs.each(function (index , value) { var h = $boxs.eq(index).outerHeight(); // 取每张照片的高度 if(index < photoNum){ hArr[index] = h;//给第一排照片的高度赋值 }else{ var minH = Math.min.apply(null,hArr);//数组中最短的元素 var minHindex = $.inArray(minH,hArr); //最短照片的高度 var m = ($(window).width()-photoNum*photoWidth)/2;//照片居中后两边的留白宽度 $(value).css({ 'position':'absolute', 'top':minH + 'px', 'left':minHindex*photoWidth+m + 'px' }) hArr[minHindex] += $boxs.eq(index).outerHeight(); //改变高度，重新获取最短照片的位置 } }) }
BY IMOOC
