瀑布式div布局如下:
那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为评论功能的高度