飞瀑式div布局 _Web前端

瀑布式div布局

瀑布式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为评论功能的高度