簡単な滝の流れ

今日はタオバオが提供する滝の流れの例を研究しましたが、大体の考えは分かりました.でも、一つの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");