js瀑布流

js瀑布流

原創

2020-02-22 07:32

做一個基於jquery的瀑布流插件：

/**
 * Created by qi on 2019/12/6.
 * 本插件適用於IE9+
 * 基於jquery
 */
var layout = function(param){
    var el = param.el;//綁定元素
    var column = param.column||3;//列數，默認3列
    var padding = param.padding/2||10;//設置列距，默認是20px

    var item = $(el).find('.item');//item個數
    var width = Math.round(100/column*100)/100;//根據列數計算寬度
    var arr = [];//存放高度的數組
    for(var i =0;i<column;i++){arr[i] = 0;}//初始數組每一項都爲0
    //var arr = new Array(column).fill(0);//ie不支持fill方法

    $(el).css({'position':'relative','margin-left': -padding+'px','margin-right':-padding+'px'});//初始化容器
    item.css({'position':'absolute','box-sizing':'border-box','padding':padding+'px'});//初始項目
    item.css({'width':width+'%'});//設置每個項的寬度用%設置，取倆位小數
    for (var i=0;i<item.length;i++){
        var minTop = Math.min.apply(null,arr);//獲取高度最小的行
        var which = arr.indexOf(minTop);//高度最小行是第一列
        var thisLeft = which*width+'%';
        item.eq(i).css({'top':minTop+'px','left':thisLeft});//設置第i個item的top和left
        arr[which] += item.eq(i).outerHeight(true);//item顯示在第幾行給第幾行加上這個item的高度
    }
    var maxTop = Math.max.apply(null,arr);//獲取高度最大的行
    $(el).css('height',maxTop+'px');
};

應用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js實現瀑布流</title>
    <style>
        .box{width: 1200px;border: 1px solid #333;margin: 0 auto;}
        .item img{width: 100%; border: 1px solid #333;}
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap">
            <div class="item"><img src="images/1.jpg" alt=""></div>
            <div class="item"><img src="images/2.png" alt=""></div>
            <div class="item"><img src="images/3.png" alt=""></div>
            <div class="item"><img src="images/4.png" alt=""></div>
            <div class="item"><img src="images/5.png" alt=""></div>
            <div class="item"><img src="images/2.png" alt=""></div>
            <div class="item"><img src="images/1.jpg" alt=""></div>
            <div class="item"><img src="images/2.png" alt=""></div>
            <div class="item"><img src="images/3.png" alt=""></div>
            <div class="item"><img src="images/4.png" alt=""></div>
            <div class="item"><img src="images/3.png" alt=""></div>
            <div class="item"><img src="images/4.png" alt=""></div>
            <div class="item"><img src="images/5.png" alt=""></div>
            <div class="item"><img src="images/2.png" alt=""></div>
            <div class="item"><img src="images/1.jpg" alt=""></div>
            <div class="item"><img src="images/2.png" alt=""></div>
        </div>
    </div>
</body>
<script src="js/jquery.js"></script>
<script src="js/Waterfall.js"></script>
<script>
    $(function(){
        layout({
            el:'.wrap',
            column:4,
            padding:20
        });
    })
</script>
</html>

效果：