5分钟教你搞定瀑布流样式

首先，我们来讲一下什么是瀑布流嘞？在某些个以图片为主的网站中，单一的布局那什么来吸引眼球，当然是尽量炫酷的布局了。瀑布流又称瀑布流式布局，是现在流行的一种布局方式。知道了这些，那瀑布流布局实现的原理是什么呢？

关于瀑布流算法

此时，可以放在第一行的图片已经就绪，分别为图片1234，这时候第一行已经放满，5号图片需要找到合适自己的位置，我们很清楚的看到，2号下面最最合适了，所以5号就登场啦

6号7号...都会依次找到属于自己的位置

知道它是怎么回事儿之后，我们转换成代码看下（vue3+typescript实现）

<template><divv-for="item in imgList":key="item"class="item"><!-- 循环遍历展示图片 --><img :alt="item" :src="require('../assets/img/' + item + '.jpeg')" width="300" :height="imgHeight[item]"></div>
</template><script lang="ts">
import { defineComponent, onMounted } from 'vue';export default defineComponent({name: 'Home',setup() {const imgList = [];// 设置图片的高度const imgHeight = {1: 150,2: 200,3: 500,4: 250,5: 300,6: 400,7: 500,8: 100};// 随机生成30个图片for (let index = 0; index < 30; index++) {imgList.push(Math.floor((Math.random() * 8) + 1));}onMounted(() => {// 每行能放几张图片const num = Math.floor(document.body.clientWidth / 300);const items = document.getElementsByClassName('item');// heightList包含height字段（表示高度）,columns字段（表示哪一列）const heightList: any = [];const gap = 10; // 图片缝隙for (let index = 0; index < items.length; index++) {if (index < num) {(items[index] as any).style.top = 0;(items[index] as any).style.left = index * (300 + gap) + 'px';heightList.push({height: (items[index] as any).offsetHeight,columns: index % num});} else {// 找到最小数的索引const findIndex = heightList.findIndex((i: any) => i.height === Math.min(...heightList.map((it: any) => it.height)));(items[index] as any).style.top = heightList[findIndex].height + gap + 'px';(items[index] as any).style.left = heightList[findIndex].columns * (300 + gap) + 'px';heightList[findIndex].height = heightList[findIndex].height + (items[index] as any).offsetHeight + gap;}}});return {imgList,imgHeight};}
});
</script>
<style>
.home {position: relative;
}
.item {display: inline-block;position: absolute;}
</style>

在日常生活中，我们还可以见到图片宽度不一，高度相同的情况，大家可以想一下怎么才能够实现~

5分钟教你搞定瀑布流样式相关推荐

ppt倒计时3分钟_老板发来200页PPT文件，让我翻译成英文，3分钟教你搞定
过年放假期间,终于可以好好休息几天了,把工作烦恼全部抛在脑后. 如果老板突然发来200页PPT文件,让你翻译成英文,你还在抱怨吗? 下面就来教你两种方法,如何将PPT翻译成英文,3分钟就能搞定. 一. ...
3分钟教你搞定VMware 克隆虚拟主机之Centos系列虚拟机克隆[⭐建议收藏⭐]
文章目录 VMware Centos 7 如何克隆虚拟主机关于作者前言一.手把手教你创建一台虚拟主模板 1.1 创建一台Centos 7 虚拟机 1.2 为什么克隆虚拟主机二 . 制作Ce ...
1分钟教你搞定apk签名！！！
很多朋友都说为什么apk程序安装了但是无法使用,还是显示程序未安装.这就是apk签名的问题了,今天和大家分享一下解决这个问题的办法.首选需要准备的工具有2个: 1.java (百度java就可以直接下 ...
怎样使用word模板？两分钟教你搞定！
Word和PPT很多的地方是一样的,都有模板可以使用.想必大家很少使用word模板,小编之前对word模板也不是很了解.今天小编来教教大家怎样使用word模板.一起来看一下吧! 一:创建模板在wor ...
音频文件如何转换成MP3格式？一分钟教你搞定
随着数字化的不断发展,人们日常生活中使用音频文件的频率也越来越高.然而,不同的设备和软件对音频文件格式的支持并不一致,因此,有时需要将音频文件进行转换.将音频文件转换成MP3格式是一种常见的需求,因为 ...
cad字体安装_免费的CAD字体去哪找？下载之后如何安装？1分钟教你搞定
我们在收到一些图纸的时候,有时打开之后总会提示你少了这种字体少了那种字体的,这时候一般需要安装缺失的字体才能解决问题,那么我们去哪儿找CAD字体呢?从网上下载的字体要怎么进行安装呢?别急,小编这就来告 ...
PDF怎么快速转换成PPT格式？一分钟教你搞定
PDF是一种非常流行的电子文档格式,但在某些情况下,您可能需要将PDF文件转换为PPT格式,以便更好地演示或编辑.在本文中,我将向您展示如何快速将PDF转换为PPT,只需几个简单的步骤即可完成. 步骤 ...
手把手教您搞定用户画像（战略解读|建模体系|维度分解|应用流程）
备注:此博客为转载,链接地址请点击此处手把手教您搞定用户画像下面,我们就来手把手地教你,如何用敏捷可视化分析搞定用户画像. 什么是用户画像? 在互联网逐渐步入大数据时代后,不可避免的给企业及消费者 ...
多个PDF文件如何合并成一个？三步教你搞定
在日常学习生活中,如果你需要将多个文档整合为一个完整的文件,比如说多篇文章.多张图片.多个表格等等,这时候就需要将这些文档合并成一个PDF文件.如何将多个PDF文件如何合并成一个?三步教你搞定. 步骤 ...

5分钟教你搞定瀑布流样式

关于瀑布流算法

5分钟教你搞定瀑布流样式相关推荐

最新文章

热门文章