瀑布式div布局

来源：互联网发布：刘德华大战周杰伦知乎编辑：程序博客网时间：2024/05/10 05:50

瀑布式div布局如下：

首先，让每个div布局是绝对定位，只由js动态给这些div添加top和left属性。

那top和left的值如何定呢，算法如下：

把这个瀑布看成三列，c1,c2,c3。一开始没div时，它们的height值为0，left值为0,350,700，当第1个div添加时，比较c1、c2和c3，找出height值最小的，然后height值最小的c1的height值和left值分别赋给div的top值和left值，然后c1的height为height+$(thisdiv).height();

var c = [ new cInfo(0, 0), new cInfo(0, 350), new cInfo(0, 700) ]; //三列  全局变量function getMin() { var cmin = c[0]; if (c[1].height < cmin.height) cmin = c[1]; if (c[2].height < cmin.height) cmin = c[2]; return cmin;}function cInfo(height, left) { this.height = height; this.left = left;}关键代码 //定位 var cmin = getMin(); var top = cmin.height; var left = cmin.left; var $pin = $(newRecord);  // 新的div $pin.css("top", top); $pin.css("left", left); $pin.attr("data-id", left == "0" ? 0 : (left == "350" ? 1 : 2));    //标记是第几列 $dataContainer.append($pin);  //添加div if (commentCount > 3) {   //评论功能，不是本章重点 var $more = $pin.find(".more").clone(true); $pin.append($more); $more.show(); } cmin.height = cmin.height + $pin.height()+30;  //30为评论功能的高度