瀑布流布局（jQuery）

Posted 2021-02-16 rose-1121

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了瀑布流布局（jQuery）相关的知识，希望对你有一定的参考价值。

在百度上看见的好多都是引用Masonry插件，之后我自己尝试了一个没有使用插件的

<body>
        <div id="main">
            <div class="box">
                <div class="pic">
                    <img src="../picture/1.png">
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    <img src="../picture/2.png">
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    <img src="../picture/3.png">
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    <img src="../picture/4.png">
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    <img src="../picture/5.png">
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    <img src="../picture/6.png">
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    <img src="../picture/2.png">
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    <img src="../picture/4.png">
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    <img src="../picture/5.png">
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    <img src="../picture/6.png">
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    <img src="../picture/2.png">
                </div>
            </div>
        </div>
    </body>

下面是全部的css比较简单

<style>
            * {
                margin: 0;
                padding: 0;
            }
            
            #main {
                position: relative;
                width: 900px;
                margin: 0 auto;
            }
            
            .box {
                padding: 15px 0 0 15px;
                float: left;
            }
            
            
            
            .pic img {
                width: 165px;
                height: auto;
            }
        </style>

最重要的这一段啦

<script>
        $(window).on(‘load‘, function() {
    waterfall();
    var dataInt = {
        "data": [{
            "src": "../picture/1.png"
        }, {
            "src": "../picture/2.png"
        }, {
            "src": "../picture/3.png"
        }]
    };
})
function waterfall() {
    var $boxs = $(‘#main>div‘);
    var w = $boxs.eq(0).outerWidth();
    var cols = Math.floor($(window).width() / w);
    $(‘#main‘).width(w * cols).css(‘margin‘, ‘0 auto‘);
    var hArr = [];
    $boxs.each(function(index, value) {
        var h = $boxs.eq(index).outerHeight();
        if (index < cols) {
            hArr[index] = h;
        } else {
            var minH = Math.min.apply(null, hArr);
            var minHIndex = $.inArray(minH, hArr);
            $(value).css({
                ‘position‘: ‘absolute‘,
                ‘top‘: minH + ‘px‘,
                ‘left‘: minHIndex * w + ‘px‘
            })
            hArr[minHIndex] += $boxs.eq(index).outerHeight();
        }
    })

}


    </script>

下面这段jq 是可以根据鼠标轮播下拉加载页面

<script>
        $(window).on(‘load‘, function() {
    waterfall();
    var dataInt = {
        "data": [{
            "src": "../picture/1.png"
        }, {
            "src": "../picture/2.png"
        }, {
            "src": "../picture/3.png"
        }]
    };
    $(window).on(‘scroll‘, function() {
      if (checkScrollSlide) {
            $.each(dataInt.data, function(key, value) {        
                var oBox = $(‘<div>‘).addClass(‘box‘).appendTo($(‘#main‘));
                var oPic = $(‘<div>‘).addClass(‘pic‘).appendTo($(oBox));
                var oImg = $(‘<img>‘).attr(‘src‘, $(value).attr(‘src‘)).appendTo($(oPic));
            })
            waterfall();
        }
    })
})
function waterfall() {


    var $boxs = $(‘#main>div‘);//包含选择器， 空格选择器会选择所有的子元素 ，> 取mian元素的第一个子元素
    var w = $boxs.eq(0).outerWidth();// 列宽 width（）只能获得图片的宽度，outerWidth（）能获得包括边界的宽度

    var cols = Math.floor($(window).width() / w);
    $(‘#main‘).width(w * cols).css(‘margin‘, ‘0 auto‘);
    var hArr = [];
    $boxs.each(function(index, value) {
      
        var h = $boxs.eq(index).outerHeight();// 获取每个图片的高
        if (index < cols) {
            hArr[index] = h;// 获取第一行的高度
        } else {
            var minH = Math.min.apply(null, hArr);// 获取最矮图片的索引
            var minHIndex = $.inArray(minH, hArr);inArray函数能获取指定数值的索引
            console.log(value);
            $(value).css({
                ‘position‘: ‘absolute‘,
                ‘top‘: minH + ‘px‘,
                ‘left‘: minHIndex * w + ‘px‘
            })
            hArr[minHIndex] += $boxs.eq(index).outerHeight();
        }
    })
}
function checkScrollSlide() {
    var $lastBox = $(‘#main>div‘).last();// 获取最后一个图片
    var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight() / 2);// 最后一个图片距离父元素的高度和自身一半的高度
    var scrollTop = $(window).scrollTop();// 划过的高度
    var documentH = $(window).height();//浏览器的高度
    return (lastBoxDis < scrollTop + documentH) ? true : false;
}

    </script>

两个js的区别：前者没有下拉加载效果后者有下拉加载效果

以上是关于瀑布流布局（jQuery）的主要内容，如果未能解决你的问题，请参考以下文章

jQuery Wookmark 瀑布流布局