一个简单的瀑布流
博客专区 > kongjun 的博客 > 博客详情
一个简单的瀑布流
kongjun 发表于3年前
一个简单的瀑布流
  • 发表于 3年前
  • 阅读 26
  • 收藏 1
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

今天研究了一下淘宝提供的瀑布流的案例,大致的思路有点了解了,但还寻在一个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");


标签: javascript 瀑布流
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 7
博文 96
码字总数 40140
×
kongjun
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: