js瀑布流
浏览数：27 /
时间：2015年06月09日
1 $(document).ready(function(){ 2 /* 3 * <div class="layoutContainer" style="position:relative"> 4 * <div class="news-list" style="position:absolute"></div> 5 * <div class="news-list" style="position:absolute"></div> 6 * </div> 7 * 首先，定义变量 8 * cwidth:容器宽度 9 * dwidth:div宽度 10 * num:div个数 11 * 获取每行的数量：m 12 * 每个div之间的间隔:lwidth 13 * 每个div上下之间的间隔：mheight 14 * 分别获取各个 left,集合：left; 15 * 记录各个列的高度，数组array:lheight 16 * 记录div总高度。mainheight 17 * 函数： 18 * getHeight():返回高度最短的列数 19 * 20 * */ 21 cwidth=$(".layoutContainer").width(); 22 dwidth=$(".news-list").width(); 23 num=$(".news-list").length; 24 m= Math.floor(cwidth/dwidth); 25 lwidth=(cwidth-dwidth*m)/(m-1); 26 mheight=15; 27 mainheight=0; 28 var lheight=new Array(); 29 for(u=0;u<m;u++){ 30 lheight[u]=0; 31 } 32 function getHeight(){ 33 lr=0; //第几列 0,1,2,3,4... 34 lh=lheight[0]; 35 for(i=0;i<m;i++){ 36 if(lheight[i]<lh){ 37 lr=i; 38 lh=lheight[i]; 39 } 40 } 41 return lr; 42 } 43 function setAddr(n){ 44 x=getHeight(); //这个可以得知，div css.left=(lwidth+dwidth)*x 45 div=$(".news-list").eq(n); 46 xleft=(lwidth+dwidth)*x; 47 // console.log(xleft); 48 xtop=lheight[x]+mheight; 49 // console.log(xtop); 50 lheight[x]=xtop+div.innerHeight()+15; 51 // console.log(div.outerHeight()); 52 mainheight=lheight[x]>mainheight?lheight[x]:mainheight; 53 div.css({"left":xleft+"px","top":xtop+"px"}); 54 $(".layoutContainer").height(mainheight); 55 } 56 window.onload=function(){ 57 for(j=0;j<num;j++){ 58 setAddr(j); 59 } 60 } 61 });
思路：首先，判断当前容器能够排几列-->m
判断当前页面每个div之间的距离-->lwidth
设定数组，几列各个列数现在的高度-->lheight
随时记录当前页面的高度-->mainheight
从第一个内部div开始设置位置-->setAddr()-->
getHeight():返回高度最短的列数
-->计算出这个div的left: xleft=(lwidth+dwidth)*x;
-->计算出这个div的top: xtop=lheight[x]+mheight;
-->更新高度，mainheight
-->更新这行的高度：lheight[x]
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
