瀑布流布局（等宽不等高jQuery）

时间 2020-05-31

原文原文链接

在百度上看见的好多都是引用Masonry插件，以后我本身尝试了一个没有使用插件的css

<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>

最重要的这一段啦 app

<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 是能够根据鼠标轮播下拉加载页面ide

<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的区别：前者没有下拉加载效果后者有下拉加载效果函数