瀑布流佈局（等寬不等高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的區別：前者沒有下拉加載效果後者有下拉加載效果函數

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。