经典布局-瀑布流

最新推荐文章于 2025-04-29 09:51:33 发布
最新推荐文章于 2025-04-29 09:51:33 发布
阅读量1.4k 收藏 6
点赞数 10
文章标签： css css3 前端 javascript vue.js 开发语言 深度学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2401_87546826/article/details/143589112
版权

瀑布流又称瀑布流式布局，以视觉表现为参差不齐的多栏布局为主，随着页面的滚动条不断向下滚动，这种布局会不断加载数据块并附加至当前尾部。实现这种布局有很多不同的方法：如flex布局，column-count 多栏布局，grid布局，float浮动布局。

flex实现瀑布流

先创建一个包住整个瀑布流的盒子，如果是2列，给该盒子设置display：flex;flex-wrap：wrap;完成这一步我们就可以有一个flex布局，超出该盒子宽度自动换行，然后在这个大盒子内部设置2个div容器，一列取奇数，一列取偶数即可简单进行实现

<view class="box">   
  <view  v-for="(item,idx) in  dataList"  :key="idx">
    <view v-if="idx%2==1">  {{item.img}} </view>
  </view>
  <view  v-for="(item,idx) in  dataList"  :key="idx">
    <view v-if="idx%2！=1"> {{item.img}} </view>
  </view>
</view>

column-count 多栏布局

使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>column多行布局实现</title>
    <style>
      .box {
        margin: 10px;
        column-count: 3;  /* 是控制屏幕分为多少列 */
        column-gap: 10px; /* 控制列与列之间的距离 */
      }
      .item {
        margin-bottom: 10px;
      }
      img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">
        <img src="https://img2.baidu.com/it/u=1337068678,3064275007&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750" alt="">
      </div>
      <div class="item">
        <img src="https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422" alt="">
      </div>
      <div class="item">
        <img src="http://img2.baidu.com/it/u=3139110441,2189129638&fm=253&app=138&f=JPEG?w=800&h=1422" alt="">
      </div>
      <div class="item">
        <img src="http://img2.baidu.com/it/u=3444890671,796356424&fm=253&app=138&f=JPEG?w=800&h=1422" alt="">
      </div>
      <div class="item">
        <img src="http://img1.baidu.com/it/u=1286854971,3553024375&fm=253&app=138&f=JPEG?w=800&h=1422" alt="">
      </div>
      <div class="item">
        <img src="https://inews.gtimg.com/om_bt/O6SG7dHjdG0kWNyWz6WPo2_3v6A6eAC9ThTazwlKPO1qMAA/641" alt="">
      </div>
      <div class="item">
        <img src="https://inews.gtimg.com/om_bt/O0e2a37GGF5CDfNgK8GU29rF_2eJlHLDsa17LABXns7V4AA/641" alt="">
      </div>
      <div class="item">
        <img src="https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641" alt="">
      </div>
      <div class="item">
        <img src="https://img0.baidu.com/it/u=1799694557,1475747482&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" alt="">
      </div>
      <div class="item">
        <img src="https://pic.rmb.bdstatic.com/bjh/news/57e572cd41520408ebbbe5e3a6fb5b6d.jpeg" alt="">
      </div>
    </div>

    <script>
    </script>
  </body>
</html>

grid布局

先通过grid布局设置列数以及列的宽度，并通过js代码设置元素上边距和元素所需占行数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>column多行布局实现瀑布流</title>
    <style>
      body {
        margin: 0;
      }
      .box {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* 声明列的宽度 fr实现等分响应式*/
        grid-gap: 0 20px; /* 声明行间距和列间距 */
        grid-auto-rows: 2px; /*  */
        align-items: end;
      }
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      img {
        width: 100%;
        height: 100%;
      }
      /* 媒体查询 */
      @media (min-width: 1280px) and (max-width: 1920px) {
        .box {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (min-width: 768px) and (max-width: 1280px) {
        .box {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 768px) {
        .box {
          grid-template-columns: repeat(1,1fr);
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">
        <img src="https://img2.baidu.com/it/u=1337068678,3064275007&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750" alt="">
      </div>
      <div class="item">
        <img src="https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422" alt="">
      </div>
      <div class="item">
        <img src="http://img2.baidu.com/it/u=3139110441,2189129638&fm=253&app=138&f=JPEG?w=800&h=1422" alt="">
      </div>
      <div class="item">
        <img src="http://img2.baidu.com/it/u=3444890671,796356424&fm=253&app=138&f=JPEG?w=800&h=1422" alt="">
      </div>
      <div class="item">
        <img src="http://img1.baidu.com/it/u=1286854971,3553024375&fm=253&app=138&f=JPEG?w=800&h=1422" alt="">
      </div>
      <div class="item">
        <img src="https://inews.gtimg.com/om_bt/O6SG7dHjdG0kWNyWz6WPo2_3v6A6eAC9ThTazwlKPO1qMAA/641" alt="">
      </div>
      <div class="item">
        <img src="https://inews.gtimg.com/om_bt/O0e2a37GGF5CDfNgK8GU29rF_2eJlHLDsa17LABXns7V4AA/641" alt="">
      </div>
      <div class="item">
        <img src="https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641" alt="">
      </div>
      <div class="item">
        <img src="https://img0.baidu.com/it/u=1799694557,1475747482&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" alt="">
      </div>
      <div class="item">
        <img src="https://pic.rmb.bdstatic.com/bjh/news/57e572cd41520408ebbbe5e3a6fb5b6d.jpeg" alt="">
      </div>
    </div>

    <script>
      // 给每个元素模拟随机高度
      window.addEventListener('load', () => {
        document.querySelectorAll('.box > .item').forEach(item => {
          item.style.height = `${Math.floor(Math.random() * 200) + 100}px`
        })
      })

      const calcRows = () => {
        const box = document.querySelector('.box')
        const items = document.querySelectorAll('.item')
          // 获取当前列数
          const cols = getComputedStyle(box).gridTemplateColumns.split(" ").length
        
        items.forEach((item, index) => {
          // 给需要上下间隔的元素增加上间隔（每列第一个元素无需上间距）
          const gapRows = index >= cols ? 8 : 0;
          
          // 根据元素高度设置元素的需占行数
          const rows = Math.ceil(item.clientHeight / 2) + gapRows;
          // grid-row-end 属性：下边框所在的水平网格线
          item.style.gridRowEnd = `span ${rows}`;
        })
      }

      window.addEventListener('resize', calcRows)
      window.addEventListener('load', calcRows)
    </script>
  </body>
</html>

float布局

uni-app实现移动端瀑布流布局时需要先设置几列，在进行循环创建几个div，在进行浮动，然后在每个div里面放置图片，使用js代码计算每个图片高度

<template>
	<view class="container">
		<Header title="瀑布流" alignAway="center" class="sticky-pos"/>
		
		<!-- 浮动实现 -->
		<view class="waterfalls-flow">
			<view v-for="(item,index) in data.column" :key="index" class="waterfalls-flow-column"
				:style="{'width':w,'margin-left':index==0?0:m}" :id="`waterfalls_flow_column_${index+1}`">
				<view class="column-value" v-for="(item2,index2) in data[`column_${index+1}`]" :key="index2">
					<image :src="item2.image" mode="widthFix" @load="imgLoad(item2)" @error="imgError(item2)" class="imgsty">
					</image>
					<text>{{item2.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Header from '../components/header.vue';
	import {
		ref,
		reactive,
		watch,
		computed,
		getCurrentInstance,
		onMounted
	} from 'vue';
	const _this = getCurrentInstance();
	const data = reactive({
		list: [],
		column: 2,
		columnSpace: 1,
	});
	// 数据赋值
	data.list = [{
			image: 'https://via.placeholder.com/200x500.png/ff0000',
			title: '我是标题1',
			desc: '描述描述描述描述描述描述描述描述1'
		},
		{
			image: 'https://via.placeholder.com/200x200.png/2878ff',
			title: '我是标题2',
			desc: '描述描述描述描述描述描述描述描述2'
		},
		{
			image: 'https://via.placeholder.com/200x100.png/FFB6C1',
			title: '我是标题3',
			desc: '描述描述描述描述描述描述描述描述3'
		},
		{
			image: 'https://via.placeholder.com/200x300.png/9400D3',
			title: '我是标题4',
			desc: '描述描述描述描述描述描述描述描述4'
		},
		{
			image: 'https://via.placeholder.com/100x240.png/B0E0E6',
			title: '我是标题5',
			desc: '描述描述描述描述描述描述描述描述5'
		},
		{
			image: 'https://via.placeholder.com/140x280.png/7FFFAA',
			title: '我是标题6',
			desc: '描述描述描述描述描述描述描述描述6'
		},
		{
			image: 'https://via.placeholder.com/40x60.png/EEE8AA',
			title: '我是标题7',
			desc: '描述描述描述描述描述描述描述描述7'
		},
		{
			image: 'https://via.placeholder.com/200x500.png/ff0000',
			title: '我是标题1',
			desc: '描述描述描述描述描述描述描述描述1'
		},
		{
			image: 'https://via.placeholder.com/200x200.png/2878ff',
			title: '我是标题2',
			desc: '描述描述描述描述描述描述描述描述2'
		},
		{
			image: 'https://via.placeholder.com/200x100.png/FFB6C1',
			title: '我是标题3',
			desc: '描述描述描述描述描述描述描述描述3'
		},
		{
			image: 'https://via.placeholder.com/200x300.png/9400D3',
			title: '我是标题4',
			desc: '描述描述描述描述描述描述描述描述4'
		},
		{
			image: 'https://via.placeholder.com/100x240.png/B0E0E6',
			title: '我是标题5',
			desc: '描述描述描述描述描述描述描述描述5'
		},
		{
			image: 'https://via.placeholder.com/140x280.png/7FFFAA',
			title: '我是标题6',
			desc: '描述描述描述描述描述描述描述描述6'
		},
		{
			image: 'https://via.placeholder.com/40x60.png/EEE8AA',
			title: '我是标题7',
			desc: '描述描述描述描述描述描述描述描述7'
		},
	];
	// 计算列宽
	const w = computed(() => {
		const column_rate = `${100 / data.column - (+data.columnSpace)}%`;
		return column_rate;
	})
	// 计算margin
	const m = computed(() => {
		const column_margin =
			`${(100-(100 / data.column - (+data.columnSpace)).toFixed(5)*data.column)/(data.column-1)}%`;
		return column_margin;
	})
	// 每列的数据初始化
	for (let i = 1; i <= data.column; i++) {
		data[`column_${i}`] = [];
	}
	// 获取最小值的对象
	const getMin = (a, s) => {
		let m = a[0][s];
		let mo = a[0];
		for (var i = a.length - 1; i >= 0; i--) {
			if (a[i][s] < m) {
				m = a[i][s];
			}
		}
		mo = a.filter(i => i[s] == m);
		return mo[0];
	}
	// 计算每列的高度
	function getMinColumnHeight() {
		return new Promise(resolve => {
			const heightArr = [];
			for (let i = 1; i <= data.column; i++) {
				const query = uni.createSelectorQuery().in(_this);
				query.select(`#waterfalls_flow_column_${i}`).boundingClientRect(data => {
					heightArr.push({
						column: i,
						height: data.height
					});
				}).exec(() => {
					if (data.column <= heightArr.length) {
						resolve(getMin(heightArr, 'height'));
					}
				});
			}
		})
	};
	async function initValue(i) {
		if (i >= data.list.length) return false;
		const minHeightRes = await getMinColumnHeight();
		data[`column_${minHeightRes.column}`].push({
			...data.list[i],
			index: i
		});
	}
	onMounted(() => {
		initValue(0);
	})
	// 图片加载完成
	function imgLoad(item) {
		const i = item.index;
		initValue(i + 1);
	}
	// 图片加载失败
	function imgError(item) {
		const i = item.index;
		initValue(i + 1);
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: rgb(237, 239, 246);
		height: 100%;
	}
	.sticky-pos {
		position: sticky;
		top: 0;
		z-index: 9;
		background-color: rgb(237, 239, 246);
		padding-bottom: 30rpx;
	}
	.waterfalls-flow {
		padding-top: 50rpx;

		&-column {
			float: left;
			padding: 0 0 200rpx;
		}
	}

	.column-value {
		width: 100%;
	}

	.imgsty {
		width: 100%
	}
</style>

使用瀑布流插件

  1. vue-waterfall-easy
  2. vue-masonry-css
  3. vue-waterfall
瀑布流布局（CSS flex实现）
一起学习一起进步~
10-09 1537
【代码】瀑布流布局（CSS flex实现）
flex瀑布流（响应式配置）
Sqddian的博客
02-21 2036
flex布局 瀑布流 响应式
实现瀑布流布局的四种方式--以vue为例（超详细）
最新发布
qq_44242707的博客
04-29 1157
详细阐述了在vue项目中实现瀑布流布局的四种方式，并比较了四种方式的优劣点
利用flex布局实现瀑布流
m0_59209041的博客
08-02 2904
废话少说，先上代码。
column-gap和column-count 之纯css实现瀑布流
Pandora_417的博客
11-18 779
column-gap列之间的距离 column-count一行有多少列 <!-- * @Descripttion: 瀑布流 * @Author: Pandora * @Date: 2021-11-18 16:35:22 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con
flex 布局瀑布流
weixin_44286765的博客
04-25 1048
Document
瀑布流布局
weixin_34216196的博客
11-13 163
瀑布流布局 　　在淘宝，蘑菇街等网站上我们经常可以看到瀑布流布局，而瀑布流布局的始祖便是www.pinterest.com,如下所示： 　　瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站网站为这类风格。 ...
微信小程序--瀑布流展示效果（通用潮流网络直播、图片展示）
07-28
瀑布流布局，也称为Pinterest布局，是一种常见的网页设计模式，尤其适用于内容丰富的应用，如图片分享、网络直播或文章展示，因为它能够以美观且易于浏览的方式排列内容。 1. **瀑布流组件**： 这个项目中提到的...
安卓瀑布流相关-安卓开发经典--瀑布流的实现.rar
07-30
在本资料包“安卓开发经典 -- 瀑布流的实现.rar”中，你将找到关于如何在Android平台上实现瀑布流布局的相关代码和知识。 首先，理解瀑布流布局的实现原理。瀑布流的核心在于动态调整每个元素的位置，以保持屏幕的...
微信小程序-瀑布流布局.zip
04-20
瀑布流布局，又称瀑布式布局或Pinterest布局，是网页设计中常见的一种展示方式，尤其适用于图片或者商品展示，因为它可以有效地利用屏幕空间，让用户在滚动页面时获得连续且富有视觉冲击力的体验。 在微信小程序中...
前端JS-瀑布流布局-直接运行-代码解释
05-24
瀑布流布局，也被称为Masonry布局，是一种常用于网页设计中的布局方式，尤其在图片展示、商品目录等场景中广泛应用。这种布局方式模仿了物理世界中瀑布流水的自然下落现象，使得页面上的元素能够自适应地填充可用...
纯css3 弹性布局瀑布流
11-04
纯css3 弹性布局瀑布流
安卓开发经典 -- 瀑布流的实现.zip
03-13
瀑布流布局，又称瀑布式加载或Infinite Scroll，是一种在移动设备和网页设计中常见的布局方式，尤其在社交网络、图片分享和电商应用中广泛使用。这种布局方式模仿了真实的瀑布，让内容像水一样从上到下自然流动，...
瀑布流布局Flex
偏执
08-03 1036
但其它属性可以是一样。同样的，响应式设置，使用Flexbox实现响应式布局比多列布局要来得容易，他天生就具备这方面的能力，只不过我们这里需要对容器的高度做相关的处理。Flexbox布局到今天已经是使用非常广泛的，也算是很成熟的一个特性。而且当我们的项目列表是动态生成，而且内容不好控制之时，这就更蛋疼了。可以设置成任何高度值（采用任何的单位），但不能不显式的设置，如果没有显式的设置，容器就无法包裹住项目列表。这里关键是容器的高度，示例中显式的设置了。方法来控制每个列的宽度，如果你希望是三列，那么可以设置。
Flex布局，几行代码就可以实现瀑布流布局，代码简单，定制化强。
wu7zhi的博客
02-01 1054
原理很简单，计算图片的宽高，再计算每列的使用高度，然后再将当前图片放置在列高最小的一列。其实这种方式使用什么方式布局都无所谓，我使用的是flexd布局。Flex的使用在这里就不讲解了，网上的教程一大堆。这里讲解使用VUE3实现，并封装成可以使用的组件。
瀑布流布局的实现
weixin_42274805的博客
09-18 2099
瀑布流布局视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部​​ 瀑布流的实现方法决定了它的元素排序，具体请看我这篇推文。
瀑布流布局原理及详解
dhp1994的博客
10-29 2644
主要使用了 column-count 和 column-gap 属性，column-count 属性用来设置列数，column-gap 属性用来设置列于列之间的间距。第一种方式实现的是列数固定的布局，所以当列数可以任意指定时，上述方法就不再适用了，动态列数的 DOM 结构和样式和第一种方式是一样的，只有 js 代码略有不同。将大容器（父元素）的 display 设置为 flex，然后使用 flex-flow 属性，设置为：flex-flow: column wrap。页面的 DOM 元素。
瀑布流布局代码
03-08
### 使用 CSS 和 JavaScript 实现瀑布流布局 #### 1. HTML 结构 为了创建一个简单的瀑布流布局，HTML 需要有一个容器来容纳所有的项目。 ```html <div id="waterfall-container"> <!-- 图片项会在这里动态添加 --> </div> ``` #### 2. CSS 样式 CSS 负责设定基础样式以及确保每一列具有相同的宽度并能够垂直堆叠。这里采用浮动属性让元素自然地排列成多列形式[^1]。 ```css #waterfall-container { column-count: 3; /* 设置三栏 */ column-gap: 1em; } .item { display: inline-block; width: 100%; margin-bottom: 1em; } ``` 对于不同设备尺寸下的响应性调整，可以通过媒体查询改变 `column-count` 属性值： ```css @media (max-width: 768px) { #waterfall-container { column-count: 2; } } @media (max-width: 480px) { #waterfall-container { column-count: 1; } } ``` #### 3. JavaScript 动态加载内容 JavaScript 可用于计算最佳插入点并将新条目追加到文档对象模型(DOM)[^2] 中。以下是简化版的实现逻辑： ```javascript function createWaterfallItem(imageUrl, description) { const itemElement = document.createElement(&#39;div&#39;); itemElement.className = &#39;item&#39;; // 创建内部结构 const imgTag = `<img src="${imageUrl}" alt="">`; const descTag = `<p>${description}</p>`; itemElement.innerHTML = `${imgTag}${descTag}`; return itemElement; } // 假设有一组图片URLs和描述文字的数据源 const itemsData = [ { url: &#39;image-url-1.jpg&#39;, text: &#39;Description 1&#39; }, { url: &#39;image-url-2.jpg&#39;, text: &#39;Description 2&#39; }, // 更多项... ]; itemsData.forEach(item => { const newItem = createWaterfallItem(item.url, item.text); waterfallContainer.appendChild(newItem); // 添加至页面中 }); ``` 此段脚本遍历给定的数据集，并为每一个数据项构建对应的 DOM 元素，随后将其附加到指定的目标节点之下。这种方法允许开发者轻松管理大量异步获取的内容片段，在实际应用中还可以加入懒加载机制优化性能表现[^4]。 #### 4. 进一步改进 为了避免初次渲染时可能出现的闪烁现象，可以在初始化阶段隐藏所有卡片直到完成全部DOM操作之后再显示出来。这可通过设置初始状态为 `visibility:hidden` 并在适当时候切换回 `visibility:visible` 来达成。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值