前提是每張圖片寬度要設置成一樣,準備15張圖測試文章來源地址http://www.zghlxwxcb.cn/news/detail-721292.html

<div class="img-main">
                <div>
                    <img src="@/assets/images/sq/1.jpg" alt="" title="1">
                </div>
                <div>
                    <img src="@/assets/images/sq/2.jpg" alt="" title="2">
                </div>
                <div>
                    <img src="@/assets/images/sq/3.jpg" alt="" title="3">
                </div>
                <div>
                    <img src="@/assets/images/sq/4.jpg" alt="" title="4">
                </div>
                <div>
                    <img src="@/assets/images/sq/5.jpg" alt="" title="5">
                </div>
                <div>
                    <img src="@/assets/images/sq/6.jpg" alt="" title="6">
                </div>
                <div>
                    <img src="@/assets/images/sq/7.jpg" alt="" title="7">
                </div>
                <div>
                    <img src="@/assets/images/sq/8.jpg" alt="" title="8">
                </div>
                <div>
                    <img src="@/assets/images/sq/9.jpg" alt="" title="9">
                </div>
                <div>
                    <img src="@/assets/images/sq/00.jpg" alt="" title="00">
                </div>
                <div>
                    <img src="@/assets/images/sq/11.jpg" alt="" title="11">
                </div>
                <div>
                    <img src="@/assets/images/sq/12.jpg" alt="" title="12">
                </div>
                <div>
                    <img src="@/assets/images/sq/13.jpg" alt="" title="13">
                </div>
                <div>
                    <img src="@/assets/images/sq/14.jpg" alt="" title="14">
                </div>
                <div>
                    <img src="@/assets/images/sq/15.jpg" alt="" title="15">
                </div>
 </div>

1.屏幕大小列可變column實現(xiàn),設置默認每列的圖片寬度

 //瀑布流column實現(xiàn)
 .img-main {
    //寬度200px 
    column-width: 300px;
    //列之間間隔2px 
    column-gap: 2px;
}
.img-main>div>img {
    width: 100%;
} 

2.屏幕大小列可變2 @media來控制

/* //瀑布流column實現(xiàn) */
.img-main {
    /* 設置列數(shù) 改變屏幕大小@media 來控制-實現(xiàn) 默認1列-可自動改變  */
    column-count: 1;
    /* 列之間間隔2px  */
    column-gap: 2px;
      /* 設置每個item的底部間距 */
    margin-bottom: 2px;
}

.img-main>div>img {
    /* 不變形設置,默認寬大小 */
    width: 100%;
    /* 設置每個item的底部間距 */
    margin-bottom: 2px;
    /* break-inside: avoid; */
    /* 防止圖片被拆分到兩列 */
}

/* 使用媒體查詢，根據(jù)屏幕大小來調(diào)整列數(shù) */
@media (min-width: 768px) {
    .img-main {
        column-count: 3;
        /* 屏幕寬度大于等于768px時，設置為3列 */
    }
}

@media (min-width: 1024px) {
    .img-main {
        column-count: 6;
        /* 屏幕寬度大于等于1024px時，設置為4列 */
    }
}

3.不可變-屏幕大小列不可變

.img-main {  
  column-count: 4; /* 設置列數(shù)為4 */  
  column-gap: 10px; /* 設置列之間的間距 */  
}  
.img-main>div {  
  margin-bottom: 10px; /* 設置每個item的底部間距 */  
  break-inside: avoid; /* 防止圖片被拆分到兩列 */  
}  
.img-main>div>img {  
  width: 100%; /* 圖片寬度自適應列寬 */  
  height: auto; /* 圖片高度自適應以保持原始比例 */  
}

4.不可變-屏幕大小列不可變

/* //瀑布流column實現(xiàn) */
.img-main {
    /* 默認5列  */
    column-count: 5;
    /* 列之間間隔2px  */
    column-gap: 2px;
      /* 設置每個item的底部間距 */
    margin-bottom: 2px;
}

.img-main>div>img {
    /* 不變形設置,默認寬大小 */
    width: 100%;
    /* 設置每個item的底部間距 */
    margin-bottom: 2px;
    /* break-inside: avoid; */
    /* 防止圖片被拆分到兩列 */
}

5.可變-可變js來實現(xiàn)-屏幕大小列可變

  .img-main {
            position: relative;
        }
        .img-main>div>img {
            width: 200px;
            vertical-align: top;
            padding: 5px;
        }

<script>
    $(function () {
        // 獲取圖片的寬度(200px)
        let imgWidth = $('img').outerWidth(); // 200

        waterfallHandler();

        // 瀑布流處理
        function waterfallHandler() {
            // 獲取圖片的列數(shù)
            let column = parseInt($(window).width() / imgWidth);

            // 高度數(shù)組
            let heightArr = [];
            for(let i=0; i<column; i++) {
                heightArr[i] = 0;
            }

            // 遍歷所有圖片進行定位處理
            $.each($('img'), function (index, item) {
                // 當前元素的高度
                let itemHeight = $(item).outerHeight();
                // 高度數(shù)組最小的高度
                let minHeight = Math.min(...heightArr);
                // 高度數(shù)組最小的高度的索引
                let minIndex = heightArr.indexOf(minHeight);

                $(item).css({
                    position: 'absolute',
                    top: minHeight + 'px',
                    left: minIndex * imgWidth + 'px'
                });

                heightArr[minIndex] += itemHeight;
            });
        }

        // 窗口大小改變
        $(window).resize(function () {
            waterfallHandler();
        });
    });
</script>

到了這里，關(guān)于css3實現(xiàn)圖片瀑布流,根據(jù)屏幕大小列可變和不可變的的瀑布流的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！