当前位置: 代码迷 >> Web前端 >> 飞瀑式div布局
  详细解决方案

飞瀑式div布局

热度:127   发布时间:2012-11-22 00:16:41.0
瀑布式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为评论功能的高度







  相关解决方案