瀑布流函数

最新推荐文章于 2023-06-28 17:26:58 发布

PaddyWang_

最新推荐文章于 2023-06-28 17:26:58 发布

阅读量336

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/wolf20150402/article/details/50896903

版权

本文介绍了如何在jQuery对象中添加瀑布流功能，提供了相关资料链接供深入学习。

摘要由CSDN通过智能技术生成

在jQuery对象后面添加瀑布流函数

(function($){
    $.fn.waterFall = function(gap){
            // 函数调用对象 jQuery对象
        var $this = $(this),
            // 调用对象子元素集合 jQuery对象
            $items = $this.children(),
            // 总宽度
            sumWidth = $this.width(),
            // 子元素的宽度
            width = $items.width(),
            // 子元素高度
            height = 0,
            // 两个子元素之间的间距 默认20
            gap = gap || 20,
            // 总列数
            column = Math.floor(sumWidth / (width + gap)),
            // 每列的高度数组集合
            arrHeight = [];

        // 遍历子元素
        $items.each(function(key , val){
            // 获取每个子元素的高度
            height = $(val).height();
            // 第一行
            if(key < column){
                // 把第一行的子元素高度添加到数组中
                arrHeight[key] = height;
                // 第一行 子元素 top = 0  left = 为当前索引*（子元素宽度+两个元素之间的间距）