前言

准备工作

生成图片数据

为了快速生成50张图片数据，我写了如下代码：

function img() {
    const randomNum = Math.floor(Math.random() * 1000)
    const height = Math.floor(Math.random() * 200 + 300)

    //构造图片 URL
    const imgUrl = `https://picsum.photos/200/${height}?random=${randomNum}`

    //输出图片 URL
    return imgUrl

}

let list = []
for (let i = 0; i < 50; i++) {
    list.push({
        id: i,
        img: img()
    })
}

console.log(list);

这段代码会帮我们随机生成50张图片的数据，如下所示：

[
    { id: 0, img: 'https://picsum.photos/200/350?random=744' },
    { id: 1, img: 'https://picsum.photos/200/439?random=476' },
    { id: 2, img: 'https://picsum.photos/200/358?random=768' },
    { id: 3, img: 'https://picsum.photos/200/360?random=837' },
    { id: 4, img: 'https://picsum.photos/200/328?random=86' },
    { id: 5, img: 'https://picsum.photos/200/348?random=61' },
    { id: 6, img: 'https://picsum.photos/200/446?random=138' },
    { id: 7, img: 'https://picsum.photos/200/430?random=340' },
    { id: 8, img: 'https://picsum.photos/200/316?random=265' },
    { id: 9, img: 'https://picsum.photos/200/494?random=303' },
    { id: 10, img: 'https://picsum.photos/200/300?random=852' },
    { id: 11, img: 'https://picsum.photos/200/462?random=991' },
    { id: 12, img: 'https://picsum.photos/200/480?random=237' },
    { id: 13, img: 'https://picsum.photos/200/310?random=610' },
    { id: 14, img: 'https://picsum.photos/200/413?random=237' },
    { id: 15, img: 'https://picsum.photos/200/323?random=563' },
    { id: 16, img: 'https://picsum.photos/200/468?random=602' },
    { id: 17, img: 'https://picsum.photos/200/342?random=782' },
    { id: 18, img: 'https://picsum.photos/200/401?random=439' },
    { id: 19, img: 'https://picsum.photos/200/457?random=202' },
    { id: 20, img: 'https://picsum.photos/200/356?random=718' },
    { id: 21, img: 'https://picsum.photos/200/437?random=456' },
    { id: 22, img: 'https://picsum.photos/200/311?random=689' },
    { id: 23, img: 'https://picsum.photos/200/301?random=978' },
    { id: 24, img: 'https://picsum.photos/200/340?random=994' },
    { id: 25, img: 'https://picsum.photos/200/393?random=459' },
    { id: 26, img: 'https://picsum.photos/200/411?random=654' },
    { id: 27, img: 'https://picsum.photos/200/360?random=268' },
    { id: 28, img: 'https://picsum.photos/200/315?random=557' },
    { id: 29, img: 'https://picsum.photos/200/422?random=853' },
    { id: 30, img: 'https://picsum.photos/200/321?random=753' },
    { id: 43, img: 'https://picsum.photos/200/347?random=249' },
    { id: 44, img: 'https://picsum.photos/200/429?random=201' },
    { id: 45, img: 'https://picsum.photos/200/330?random=997' },
    { id: 46, img: 'https://picsum.photos/200/335?random=584' },
    { id: 47, img: 'https://picsum.photos/200/440?random=152' },
    { id: 48, img: 'https://picsum.photos/200/469?random=823' },
    { id: 49, img: 'https://picsum.photos/200/460?random=499' }
]

我们只需要将这段数据结合到页面中。

结合Vue

为了使图片快速展示在页面上，练习使用Vue来进行操作。

通过CDN引入Vue

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Html:

<div id="app">
        <div class="box">
            <div class="item" v-for="item in list" :key="item.id">
                <img :src="item.img" alt="" srcset="">
            </div>
        </div>
    </div>

Js:

const { createApp } = Vue
        createApp({
            data() {
                return {
                    list: [
                    //这里放置生成的随机50张图片的对象
                    ]
                }
            }
        }).mount('#app')

准备工作完毕，接下来就是重头戏，实现部分

Css实现瀑布流

column-count属性

这个属性是Css中本身就具有的属性——可以将元素的内容分成指定数量的列。具体用法就是在 column-count后面加上你想要分成列的数量，还可以通过column-gap属性来设置列与列之间的间隙。

Css实现：

  .box {
            padding: 10px;
            column-count: 5;
            column-gap: 20px;

        }

        .item {
            border: 1px solid #000;
            margin-top: 10px;
            break-inside: avoid;
        }

        .item img {
            width: 100%;
        }
        

网格布局实现

什么是网格布局？

网格布局（Grid Layout）是一种用于网页布局的 CSS 技术。它提供了一种二维网格系统，可以将网页内容划分为行和列，并将内容放置到网格的单元格中。通过网格布局，可以更精确地控制页面元素的位置和大小，以及实现响应式设计。

实现

通过 grid-template-columns: 1fr 1fr 1fr 1fr;属性将里面元素等比分成四列， grid-auto-rows: 1px;属性将列宽设置一像素，然后里面的元素高度是多少就占据几个列宽，这里我们就需要看图片的高度，高度控制到哪个位置结束需要一段Js来解决：

 let items = document.getElementsByClassName('item')
                Array.from(items).forEach(item => {
                    let img =
                        item.getElementsByTagName('img')[0]
                    let newImg = new Image()
                    newImg.src = img.src//img标签是特例，只要在js中出现,浏览器就会加载
                    newImg.onload = function () {
                        console.log(newImg.height);
                        //设置item 占据网格的几行
                        item.style.gridRowEnd = `span ${newImg.height}`
                    }

Css代码：

.box {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-auto-rows: 1px;
            column-gap: 5px;
        }

        .item {
            grid-row-start: auto;
        }

        .item img {
            width: 100%;
        }

这样也能实现瀑布流布局。

弹性布局

弹性布局是我们日常切页面用的比较多的一个属性，在这里我们也可以用来实现比较低水平的瀑布流布局。试想一下，当我们设置父容器弹性，子容器在y轴方向弹性的时候，并且均分父容器，是不是就能实现瀑布流布局？

在这里我们想要实现几列就只需要在Html中设置几个div（下面的例子我想要实现三列），然后放上图片，要注意一下数据数组此时也要分为n等份，用Js进行操作：

 let num = ~~(this.list.length / 3)
 this.list1 = this.list.slice(0, num)
 this.list2 = this.list.slice(num, num * 2)
 this.list3 = this.list.slice(num * 2, this.list.length)

Html:

 <div id="app">
        <div class="box">
            <div class="clomun">
                <img :src="item.img" alt="" srcset="" v-for="item in list1">
            </div>
            <div class="clomun">
                <img :src="item.img" alt="" srcset="" v-for="item in list2">
            </div>
            <div class="clomun">
                <img :src="item.img" alt="" srcset="" v-for="item in list3">
            </div>
        </div>
    </div>

Css:

  .box {
            display: flex;

        }

        .clomun {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

我们这样也就实现了瀑布流布局，如下所示：

总结

用Css实现瀑布流布局相比于用Js实现更加简单，利用一些巧妙的方式就可以实现。最后再来说一下瀑布流布局，它使得图片在一定程度上保持着美感，正好迎合了人们的心理，可以这样说电商使用瀑布流布局展示商品图片确实可以多卖出去一点东西。本篇文章就到这，谢谢大家观看。