瀑布流的实现、动态数据绑定、简单封装可根据需求动态传入一行几列的布局

本文链接：https://blog.youkuaiyun.com/qq_28948031/article/details/119533984

本文介绍了如何使用flex布局实现瀑布流效果，并通过js控制数据排序。内容包括静态展示、js动态排序以及对布局的简单封装，适应不同列数的布局需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

静态实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布式布局</title>
</head>
<style>
.falls_flex_box{
    display: flex;
    flex-direction: row;
	width: 500px;
	margin: auto;
}
.falls{
    display: flex;
    flex-direction: column;
    width: 33.33%;
}
            
.item{
    box-sizing: border-box;
    break-inside: avoid;
    padding: 10px;
}
.item-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: auto;
    font-size: 20px;
    color: #666;
    box-sizing: border-box;
    border: 1px solid #ccc;
}
</style>
<body>
    <div class="falls_flex_box">
        <div class="falls">
            <div class="item">
              <div class="item-content">
                 1.第一卦：《乾卦》乾：元，亨，利，贞。
              </div>
            </div>
            <div class="item">
              <div class="item-content">
                 4.初九，潜龙勿用。【白话】初九，龙尚潜伏在水中，养精蓄锐，暂时还不能发挥作用。《象》曰：潜龙勿用，阳在下也。
              </div>
            </div>
            <div class="item">
              <div class="item-content">
                 7.【白话】《象辞》说："龙已出现在地上"，犹如阳光普照，天下人普遍得到恩惠。
              </div>
            </div>
        </div> 
        <div class="falls">
            <div class="item">
              <div class="item-content">
                 2.第一卦：《乾卦》乾：元，亨，利，贞。【白话】《乾卦》象征天：元始，亨通，和谐，贞正。
              </div>
            </div>
            <div class="item">
              <div class="item-content">
                 5.【白话】《象辞》说：龙象征阳。"龙尚潜伏在水中，养精蓄锐，暂时还不能发挥作用"，是因为此爻位置最低，阳气不能散发出来的缘故。九二，见龙在田，利见大人。
              </div>
            </div>
            <div class="item">
              <div class="item-content">
                 8.九三，君子终日乾乾，夕惕若，厉无咎。【白话】九三，君子整天自强不息，晚上也不敢有丝毫的懈怠，这样即使遇到危险也会逢凶化吉。
              </div>
            </div>
        </div> 
        <div class="falls">
            <div class="item">
              <div class="item-content">
                 3.《象》曰：天行健，君子以自强不息。【白话】《象辞》说：天道运行周而复始，永无止息，谁也不能阻挡，君子应效法天道，自立自强，不停地奋斗下去。
              </div>
            </div>
            <div class="item">
              <div class="item-content">
                 6.【白话】九二，龙已出现在地上，利于出现德高势隆的大人物。《象》曰："见龙在田"，德施普也。
              </div>
            </div>
            <div class="item">
              <div class="item-content">
                 9.《象》曰："终日乾乾"，反复道也。【白话】《象辞》说："整天自强不息"，是因为要避免出现反复，不敢有丝毫大意。
              </div>
            </div>
        </div> 
    </div>
    
</body>
</html>

展示效果如下
在这里插入图片描述

从上面的flex布局中我们可以看到数据的排序方式是从左至右的，那么我们怎么将服务器返回的数据正常排序呢？。。。

js控制排序

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>瀑布式布局</title>
	</head>
	<style>
		.falls_flex_box {
			display: flex;
			flex-direction: row;
			width: 500px;
			margin: auto;
		}

		.falls {
			display: flex;
			flex-direction: column;
			width: 33.33%;
		}

		.item {
			box-sizing: border-box;
			break-inside: avoid;
			padding: 10px;
		}

		.item-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 10px;
			height: auto;
			font-size: 20px;
			color: #666;
			box-sizing: border-box;
			border: 1px solid #ccc;
		}
	</style>
	<body>
		<div class="falls_flex_box" id="falls_flex_box">
		</div>
		<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
			let data = [] //这边我模拟11条数据,特意展示了余数的效果，由于我模拟的数据长度一样，所有展示效果不是很明显，这里可以自己模拟长短不一的数据来展示！
			for (let i = 0; i < 11; i++) {
				data.push({
					id: i + 1,
					mes: '第' + (i + 1) + '卦：《乾卦》乾：元，亨，利，贞'
				})
			}
			let fallsHtml = '', //这边我们设计的是一行三列的布局
				columnLen = parseInt(data.length / 3);//计算每一列应该有多少条数据 

			//第一步我们实现动态追加三列
			for (let i = 0; i < 3; i++) {
				getColunmArr(i)
			}
			
			function getColunmArr(index){
				//第二步我们计算数据并排序
				let arr = []
				arr.push(index)
				for(let i=0;i<columnLen;i++){
					if(index+3*(i+1)>(data.length-1))break
					arr.push(index+3*(i+1))
				}
				//这边是计算出没一列应该获取data总的下标存放在一个数组里面
				getColumnData(arr)
			}

			function getColumnData(arr) {
				fallsHtml += '<div class="falls">'
				for (let j = 0; j <arr.length; j++) {
					fallsHtml += `
					<div class="item">
					  <div class="item-content">
						 ` + data[arr[j]].id + `.` + data[arr[j]].mes + `
					  </div>
					</div>`
				}
				fallsHtml += '</div>'
			}
			$("#falls_flex_box").html(fallsHtml)
		</script>
	</body>
</html>

展示效果如下
在这里插入图片描述

简单封装一下吧！

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>瀑布式布局</title>
	</head>
	<style>
		.falls_flex_box {
			display: flex;
			flex-direction: row;
			width: 500px;
			margin: auto;
		}

		.falls {
			display: flex;
			flex-direction: column;
			width: 33.33%;
		}

		.item {
			box-sizing: border-box;
			break-inside: avoid;
			padding: 10px;
		}

		.item-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 10px;
			height: auto;
			font-size: 20px;
			color: #666;
			box-sizing: border-box;
			border: 1px solid #ccc;
		}
	</style>
	<body>
		<div class="falls_flex_box" id="falls_flex_box">
		</div>
		<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
			let data = [] //这边我模拟11条数据,特意展示了余数的效果
			for (let i = 0; i < 11; i++) {
				data.push({
					id: i + 1,
					mes: '第' + (i + 1) + '卦：《乾卦》乾：元，亨，利，贞'
				})
			}
			function waterfall(params){
				param = {
					el:params.el,//绑定的元素
					data:params.data || [],//服务器返回的数据 
					columns:params.columns || 3//设置一行几列，默认3
				}
				let fallsHtml = '', //这边我们设计的是一行三列的布局
					columnLen = parseInt(param.data.length / param.columns);//计算每一列应该有多少条数据 
				//第一步我们实现动态追加三列
				for (let i = 0; i < param.columns; i++) {
					getColunmArr(i)
				}
				function getColunmArr(index){
					//第二步我们计算数据并排序
					let arr = []
					arr.push(index)
					for(let i=0;i<columnLen;i++){
						if(index+param.columns*(i+1)>(param.data.length-1))break
						arr.push(index+param.columns*(i+1))
					}
					//这边是计算出没一列应该获取data总的下标存放在一个数组里面
					getColumnData(arr)
				}
				
				function getColumnData(arr) {
					fallsHtml += '<div class="falls">'
					for (let j = 0; j <arr.length; j++) {
						fallsHtml += `
						<div class="item">
						  <div class="item-content">
							 ` + data[arr[j]].id + `.` + data[arr[j]].mes + `
						  </div>
						</div>`
					}
					fallsHtml += '</div>'
				}
				$(param.el).html(fallsHtml)
			}
			waterfall({el:"#falls_flex_box",data:data,columns:5})//调用，这里设置的是一行五列，可根据需求随意设置
		</script>
	</body>
</html>