今天研究了一下淘寶提供的瀑布流的案例,大致的思路有點了解了,但還尋在一個bug,就是如果圖片加載在js加載之後話,會出現圖片重疊,因爲U站裏不支持window對象,所以可以利用window.onload解決。滾動條加載的大致思路:先得到top最低的那個div,然後依次在後面動態加載。先總結這麼多,以後再回過研究看看。
var $id = function(o){
return DOM.query("." + o)[0];
};
var warpWidth = 220; //格子寬度
var margin = 14; //格子間距
function sort(el, childTagName){
var h = []; //記錄每列的高度
var box = el.getElementsByTagName(childTagName);
var minH = box[0].offsetHeight;
var boxW = box[0].offsetWidth + margin;
var n = 950 / boxW | 0; //計算頁面能排下多少Pin
el.style.width = n * boxW - margin + "px";
DOM.addClass(el, "isVisble");
for (var i = 0; i < box.length; i++) {//排序算法,有待完善
var boxh = box[i].offsetHeight; //獲取每個Pin的高度
if (i < n) { //第一行特殊處理
h[i] = boxh;
box[i].style.top = 0 + 'px';
box[i].style.left = (i * boxW) + 'px';
}
else {
minH = Array.min(h); //取得各列累計高度最低的一列
var minKey = getarraykey(h, minH);
h[minKey] += boxh + margin; //加上新高度後更新高度值
box[i].style.top = minH + margin + 'px';
box[i].style.left = (minKey * boxW) + 'px';
}
var maxH = Array.max(h);
var maxKey = getarraykey(h, maxH);
el.style.height = h[maxKey] + "px";//定位結束後更新容器高度
}
for (var i = 0; i < box.length; i++) {
DOM.addClass(box[i], "isVisble");
}
}
Array.min = function(array){
return Math.min.apply(Math, array);
}
Array.max = function(array){
return Math.max.apply(Math, array);
}
/* 返回數組中某一值的對應項數*/
function getarraykey(s, v){
var k = null;
for (k in s) {
if (s[k] == v) {
return k;
}
}
}
sort($id("wrap"), "div");