JavaScript 瀑布流简单实现(基于Jquery)

• HTML代码片段

<div class="main">
	<div class="main-items">
	    <div class="header">
	        新书奉献&nbsp;-&nbsp;夏有乔木，雅望天堂
	    </div>
	    <hr>
	    <div class="new-book-list">
	        <div class="card">
	            <a href="#">
	                <img src="../static/img/book_img/book_1.jpg" class="card-img-top" alt="散步的侵略者">
	            </a>
	            <div class="card-body">
	                <a class="card-title text-center" href="#">
	                    散步的侵略者
	                </a>
	                <p class="card-text">
	                    [日]前川知大
	                </p>
	            </div>
	        </div>
	        <div class="card">
	            <a href="#">
	                <img src="../static/img/book_img/book_2.jpg" class="card-img-top" alt="散步的侵略者">
	            </a>
	            <div class="card-body">
	                <a class="card-title text-center" href="#">
	                    三十年战争史
	                </a>
	                <p class="card-text">
	                    [英] 彼得·威尔逊
	                </p>
	            </div>
	        </div>
	        <div class="card">
	            <a href="#">
	                <img src="../static/img/book_img/book_3.jpg" class="card-img-top" alt="散步的侵略者">
	            </a>
	            <div class="card-body">
	                <a class="card-title text-center" href="#">
	                    六十个故事
	                </a>
	                <p class="card-text">
	                    [意] 迪诺·布扎蒂
	                </p>
	            </div>
	        </div>
	        <div class="card">
	            <a href="#">
	                <img src="../static/img/book_img/book_4.jpg" class="card-img-top" alt="散步的侵略者">
	            </a>
	            <div class="card-body">
	                <a class="card-title text-center" href="#">
	                    诗人的思考
	                </a>
	                <p class="card-text">
	                    (美) 海伦·文德勒
	                </p>
	            </div>
	        </div>
	        <div class="card">
	            <a href="#">
	                <img src="../static/img/book_img/book_5.jpg" class="card-img-top" alt="散步的侵略者">
	            </a>
	            <div class="card-body">
	                <a class="card-title text-center" href="#">
	                    项塔兰3
	                </a>
	                <p class="card-text">
	                    [澳大利亚]格里高利·大卫·罗伯兹
	                </p>
	            </div>
	        </div>
	        <div class="card">
	            <a href="#">
	                <img src="../static/img/book_img/book_6.jpg" class="card-img-top" alt="散步的侵略者">
	            </a>
	            <div class="card-body">
	                <a class="card-title text-center" href="#">
	                    黑镜
	                </a>
	                <p class="card-text">
	                    [英] 查利·布鲁克 / 安娜贝尔·琼斯
	                </p>
	            </div>
	        </div>
	        <div class="card">
	            <a href="#">
	                <img src="../static/img/book_img/book_7.jpg" class="card-img-top" alt="散步的侵略者">
	            </a>
	            <div class="card-body">
	                <a class="card-title text-center" href="#">
	                    抓落叶
	                </a>
	                <p class="card-text">
	                    [美]汤米·巴特勒
	                </p>
	            </div>
	        </div>
	        <div class="card">
	            <a href="#">
	                <img src="../static/img/book_img/book_8.jpg" class="card-img-top" alt="散步的侵略者">
	            </a>
	            <div class="card-body">
	                <a class="card-title text-center" href="#">
	                    漫步八十年代
	                </a>
	                <p class="card-text">
	                    老葛
	                </p>
	            </div>
	        </div>
	        <div class="card">
	            <a href="#">
	                <img src="../static/img/book_img/book_9.jpg" class="card-img-top" alt="散步的侵略者">
	            </a>
	            <div class="card-body">
	                <a class="card-title text-center" href="#">
	                    一千亿种生活
	                </a>
	                <p class="card-text">
	                    [英] 蕾秋·乔伊斯
	                </p>
	            </div>
	        </div>
	        <div class="card">
	            <a href="#">
	                <img src="../static/img/book_img/book_10.jpg" class="card-img-top" alt="散步的侵略者">
	            </a>
	            <div class="card-body">
	                <a class="card-title text-center" href="#">
	                    电影时代
	                </a>
	                <p class="card-text">
	                    [美] 保琳·凯尔
	                </p>
	            </div>
	        </div>
	    </div>
	</div>
</div>

• CSS代码片段 (这里使用了bootstrap)

.main {
    /*background: rgba(55, 55, 55, 0.4);*/
    width: 1080px;
    margin: 15px;
    padding: 15px;
    float: left;
    border-radius: 3px;
    background: rgba(55, 55, 55, 0.4);
}
.new-book-list {
    position: relative;

}
.card {
    float: left;
    width: 135px;
    margin: 10px 20px;
    text-align: center;
    position: absolute;
}
.card:hover {
    box-shadow: 0 0 10px #fff;
}
.card-title {
    font-size: 14px;
    color: #333;
}
.card-title:hover {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.35);
}
.card-body {
    margin: auto 0;
}
.card-text {
    font-size: 13px;
    color: #333;
}

• JavaScript代码片段

/*
*           瀑布流插件
*
*      Author: 掌上天空
*      Time: 2020/12/6 - 21:51
* */

;
(function($) {
    $.fn.waterFall = function() {
        // 封装 瀑布流插件
        var defaults = {
            // 设置盒子的间距
            gap: 40
        }
        defaults = $.extend(defaults)
        var $this = $(this) // 获取 Content 列表元素
        var item = $this.children() // 获取所有的盒子元素
        // 每一行的数目是： 父元素的总宽度 / (子元素的宽度 + gap)
        var itemWidth = item.width()    // 瀑布流元素的宽度
        var itemHeight = 0  // 瀑布流元素的高度，初始化为0
        var column = Math.floor($(this).width() / (itemWidth + defaults.gap))    // 计算一行最多几列
        console.log(column)
        var arrayHeight = []    // 保存每一列的高度值
        item.each(function( index, element ) {
            itemHeight = $(element).height()    // 获取当前遍历元素的高度
            if( index < column ) {
                // 如果当前遍历的元素ID小于 column的数目，表示当前是第一行
                $(element).css({
                    top: 0,     // 第一行是顶格显示的，所以设置top为 0
                    left: index * (itemWidth + defaults.gap)
                })
                arrayHeight[index] = itemHeight
            } else {
                function getMinHeight( arr ) {
                    var min = {}    // 存储数组中的最小值和索引值
                    min.index = 0   // 最小值的索引值
                    min.value = arr[min.index]
                    for(let i = 1; i < arr.length; i++) {
                        if( arr[i] < min.value) {
                            min.value = arr[i]
                            min.index = i
                        }
                    }
                    return min
                }
                var min = getMinHeight(arrayHeight)
                var minIndex = min.index
                var minValue = min.value
                $(element).css({
                    top: minValue + defaults.gap,
                    left: minIndex * (itemWidth + defaults.gap)
                })
                arrayHeight[minIndex] += (itemHeight + defaults.gap)
            }
        })
        // 获取子元素中的最高高度，将此高度加上间隔高度得到新高度，新高度即父元素的高度
        let arrMaxValue = arrayHeight[0]
        for(let i = 1; i < arrayHeight.length; i++) {
            if ( arrayHeight[i] > arrMaxValue ) {
                arrMaxValue = arrayHeight[i]
            }
        }
        // 设置当前的元素（调用此插件的元素）的高度为 [子元素列的最大值 + 间隔]
        $(this).css({
            height: arrMaxValue + defaults.gap
        })
    }
})(jQuery)

• 最后的效果图

• card比较少的时候的效果

• card比较多的时候的效果