基于jQuery的簡易瀑布流實現 - samwu－IT工程師數位筆記本

文章出處

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>簡易瀑布流（基于多欄列表流體布局實現）</title>
    <style type="text/css">
    .WSCWaterfall{
        width: 960px;
        margin: 0 auto;
    }
    .WSCWaterfallCell{
        margin-bottom: 10px;
        padding: 5px 8px;
        line-height: 18px;
        width: 214px;
        border: 1px solid #999;
        border-radius: 4px;
        background-color: #ccc;
        overflow: hidden;
    }
    .WSCWaterfallColumn{
        display: inline-block;
        vertical-align: top;
    }
    .template_div{
        display: none;
    }
    </style>
</head>
<body>
    <div class="WSCWaterfall">
    </div>
    <div class="template_div">
        <div class="WSCWaterfallColumn"></div>
        <div class="WSCWaterfallCell"></div>
    </div>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript">
    
function WSCWaterFall(arg_obj){
    var data_arr = arg_obj["data_arr"] || [];
    var columnNum = arg_obj["columnNum"] || 4;
    var $WSCWaterfallCell_template = arg_obj["WSCWaterfallCell_template"] || $('.template_div').find(".WSCWaterfallCell");
    var $WSCWaterfallColumn_template = arg_obj["WSCWaterfallColumn_template"] || $('.template_div').find(".WSCWaterfallColumn");
    var $WSCWaterfall =arg_obj["WSCWaterfall_outer"] || $(".WSCWaterfall");
    var waterFallCell = arg_obj["waterFallCell_fn"] ;

    var columnArr = [];
    var cellArr = [];
    

    // 生成列數組
    for(var j=0; j<columnNum; j++){
        var $WSCWaterfallColumn = $WSCWaterfallColumn_template.clone(true);
        columnArr.push($WSCWaterfallColumn);
    }

    // 生成瀑布流單元，用戶可自定義
    waterFallCell(data_arr, $WSCWaterfallCell_template, cellArr);

    // 列數組和單元數組篩選配對
    for(var k = 0; k < cellArr.length; k++){
        var $WSCWaterfallCell = cellArr[k];
        var index = (k % columnNum);
        try{
            columnArr[index].append($WSCWaterfallCell);
        }
        catch(e){
            console.log(e);
            console.log(index);
        }
    }

    // 渲染html頁面
    for(var i=0; i< columnArr.length; i++){
        // 可優化的地方，一次append進去，而不是循環append
        $WSCWaterfall.append(columnArr[i]);
    }
}

// 初始化測試數據
var data_arr = [];
for(var i=0; i<50; i++){
    data_arr.push(i);
}

// data_arr是數據源
// columnNum 是列數
// WSCWaterfallCell_template 是 瀑布流單元格的模板jQuery引用
// WSCWaterfallColumn_template 是 瀑布流列的模板jQuery引用
// WSCWaterfall_outer 是 包裹瀑布流的jQuery引用
// waterFallCell_fn 是 渲染瀑布流單元格的方法,其中第三個參數cellArr是指單元格的jQuery引用數組,它根據data_arr和WSCWaterfallCell_template計算出來
WSCWaterFall({
    "data_arr":data_arr,
    "columnNum":4,
    "WSCWaterfallCell_template" : $('.template_div').find(".WSCWaterfallCell"),
    "WSCWaterfallColumn_template" :$('.template_div').find(".WSCWaterfallColumn"),
    "WSCWaterfall_outer" : $(".WSCWaterfall"),
    "waterFallCell_fn" : function(data_arr, $WSCWaterfallCell_template, cellArr){
        for (var i = 0; i < data_arr.length; i++) {
            var $WSCWaterfallCell = $WSCWaterfallCell_template.clone(true);
            $WSCWaterfallCell.append(i);
            cellArr.push($WSCWaterfallCell);
        }
    }
});



</script>
</body>
</html>

封裝成jQuery插件如下

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>封裝成jQuery插件，簡易瀑布流（基于多欄列表流體布局實現）</title>
    <style type="text/css">
    .WSCWaterfall{
        width: 960px;
        margin: 0 auto;
    }
    .WSCWaterfallCell{
        margin-bottom: 10px;
        padding: 5px 8px;
        line-height: 18px;
        width: 214px;
        border: 1px solid #999;
        border-radius: 4px;
        background-color: #ccc;
        overflow: hidden;
    }
    .WSCWaterfallColumn{
        display: inline-block;
        vertical-align: top;
    }
    .template_div{
        display: none;
    }
    </style>
</head>
<body>
    <div class="WSCWaterfall">
    </div>
    <div class="WSCWaterfall">
    </div>
    <div class="template_div">
        <div class="WSCWaterfallColumn"></div>
        <div class="WSCWaterfallCell"></div>
    </div>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript">
    




// data_arr是數據源
// columnNum 是列數
// WSCWaterfallCell_template 是 瀑布流單元格的模板jQuery引用
// WSCWaterfallColumn_template 是 瀑布流列的模板jQuery引用
// WSCWaterfall_outer 是 包裹瀑布流的jQuery引用
// waterFallCell_fn 是 渲染瀑布流單元格的方法,其中第三個參數cellArr是指單元格的jQuery引用數組,它根據data_arr和WSCWaterfallCell_template計算出來
/*
WSCWaterFall({
    "data_arr":data_arr,
    "columnNum":4,
    "WSCWaterfallCell_template" : $('.template_div').find(".WSCWaterfallCell"),
    "WSCWaterfallColumn_template" :$('.template_div').find(".WSCWaterfallColumn"),
    "WSCWaterfall_outer" : $(".WSCWaterfall"),
    "waterFallCell_fn" : function(data_arr, $WSCWaterfallCell_template, cellArr){
        for (var i = 0; i < data_arr.length; i++) {
            var $WSCWaterfallCell = $WSCWaterfallCell_template.clone(true);
            $WSCWaterfallCell.append(i);
            cellArr.push($WSCWaterfallCell);
        }
    }
});
*/

// 初始化測試數據
var data_arr = [];
for(var i=0; i<50; i++){
    data_arr.push(i);
}

(function($){
    $.extend($.fn, {
        "WSCWaterFall": function(options){
            var options = $.extend({
                "data_arr":[],
                "columnNum": 4
            }, options);

            return this.each(function(index,element){
                options["WSCWaterfall_outer"] = $(element);
                WSCWaterFall(options);
            });
        }
    });


    function WSCWaterFall(arg_obj){
        var data_arr = arg_obj["data_arr"] ;
        var columnNum = arg_obj["columnNum"];
        var $WSCWaterfallCell_template = arg_obj["WSCWaterfallCell_template"] ;
        var $WSCWaterfallColumn_template = arg_obj["WSCWaterfallColumn_template"] ;
        var $WSCWaterfall =arg_obj["WSCWaterfall_outer"] ;
        // var $WSCWaterfall = $(this);
        var waterFallCell = arg_obj["waterFallCell_fn"] ;

        var columnArr = [];
        var cellArr = [];
        

        // 生成列數組
        for(var j=0; j<columnNum; j++){
            var $WSCWaterfallColumn = $WSCWaterfallColumn_template.clone(true);
            columnArr.push($WSCWaterfallColumn);
        }

        // 生成瀑布流單元，用戶可自定義
        waterFallCell(data_arr, $WSCWaterfallCell_template, cellArr);

        // 列數組和單元數組篩選配對
        for(var k = 0; k < cellArr.length; k++){
            var $WSCWaterfallCell = cellArr[k];
            var index = (k % columnNum);
            try{
                columnArr[index].append($WSCWaterfallCell);
            }
            catch(e){
                console.log(e);
                console.log(index);
            }
        }

        // 渲染html頁面
        for(var i=0; i< columnArr.length; i++){
            // 可優化的地方，一次append進去，而不是循環append
            $WSCWaterfall.append(columnArr[i]);
        }
    }
})(jQuery);

$(".WSCWaterfall").WSCWaterFall({
    "data_arr":data_arr,
    "columnNum": 3,
    "WSCWaterfallCell_template" : $('.template_div').find(".WSCWaterfallCell"),
    "WSCWaterfallColumn_template" :$('.template_div').find(".WSCWaterfallColumn"),
    "waterFallCell_fn" : function(data_arr, $WSCWaterfallCell_template, cellArr){
        for (var i = 0; i < data_arr.length; i++) {
            var $WSCWaterfallCell = $WSCWaterfallCell_template.clone(true);
            $WSCWaterfallCell.append(i);
            cellArr.push($WSCWaterfallCell);
        }
    }
});
</script>
</body>
</html>