瀑布流的简单实现

前言

无聊刷网页的时候,点开了一个瀑布流的图片布局.想着无聊就试着写一个,记录一下自己现在的想法,已备以后的需求.

思路如下

• 首先,瀑布流是页面按设定的列来显示图片.每张图片的宽度要相同.然后依次123..,123..,一直这样排下去.

//模仿jQuery,封装一个waterFall方法,并设定一个默认的列和边距
$.fn.waterFall = function (option){
    var defaultOption = {col:5,padding:10};
    //$.extend可以覆盖参数,如果没传就是默认,默认写在前面
    defaultOption = $.extend(defaultOption,option);
    var col = defaultOption.col;//列数
    var padding = defaultOption.padding;//间距        
    //计算每个瀑布流块的宽度,并给每个子盒子设置宽度
    var everyItemWidth = (this.width() - (col+1)*padding)/col;
    var allItems = this.children();
    allItems.width(everyItemWidth);

    //循环去设置allItems每一个的left,top值
    var itemY = [];//记录每一列的高度的，它里面只有col列个值
    //第一次加载的话,高度有一个bug,所以setTimeout让其延迟加载一下
    setTimeout(function () {
        for(var i=0;i<allItems.length;i++){
            var everyItem = allItems[i];    
            if(i<col){//布局第一行,第一行的特点，top值都为0
                $(everyItem).css({
                    top:0,
                    left:padding+(padding+everyItemWidth)*i
                });

                //将第一行的所有的元素的高度值，放在itemY数组中，方便从第二行布局时用来比较
                itemY[i] = $(everyItem).height();
            }else{
                 //布局第二行及后面的行,找到哪一列最短,把i对应的 item放在最短的那一列下面去,把刚刚那一列的长度重新设置下
                //假设第 0 列是最短的 循环判断 找出最短的是第几列
                var minCol = 0;
                for(var j=1;j<itemY.length;j++){
                    if (itemY[j]<itemY[minCol]){
                        minCol = j;
                    }
                }    
                //遍历到的第i个item,设置top,left
                $(everyItem).css({    
                    top:itemY[minCol]+padding,
                    left:padding+(padding+everyItemWidth)*minCol
                });
                //因为增加了一个新item,把刚刚那一列的长度重新设置下    
                itemY[minCol] = itemY[minCol] + padding + $(everyItem).height();
            }    
        }    
    
    var _this = this;//_this调用这个函数的this
    setTimeout(function () {
        //找到itemY中最高的那一列数据的高度，让它作为整个items的高度
        var maxCol = 0;    
        for (var i=1;i<itemY.length;i++){
            if (itemY[i]>itemY[maxCol]){
                maxCol = i;
            }
        }
        var totalHeight = itemY[maxCol] + padding;
        //给正个大盒子设置一个高度
        _this.height(totalHeight);
    },200);    
}

• 拿后台数据以后用到在考虑实际情况,大体就是ajax请求获取数据,利用模板引擎添加页面元素.
• 一个注意点

        //窗口调整时,要重新布局子元素
        $(window).on('resize',function () {
            $(".items").waterFall({padding:10});
        });