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

news/2024/5/19 17:40:45 标签: html, js, flex

静态实现

<!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_102">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>

http://www.niftyadmin.cn/n/689712.html

相关文章

spring--(6)p标签的使用

spring--(6)p标签的使用

2019独角兽企业重金招聘Python工程师标准>>> 使用p标签可以简化xml文件配置 <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/X…
阅读更多...
无人值守linux系统安装

无人值守linux系统安装

方法&#xff1a;FTPTFTPDHCPKickstartPXE 1.各类工具的安装启动&#xff0c;需要配置yum源&#xff0c;具体不再赘述 2.准备工作完成后&#xff0c;进行kickstart的配置 [roottest1 ~]# mkdir /tftpboot [roottest1 ~]# mkdir /tftpboot/pxelinux.cfg [roottest1 ~]# cp /usr/…
阅读更多...
where 子句和having子句中的区别

where 子句和having子句中的区别

1.where 不能放在GROUP BY 后面 2.HAVING 是跟GROUP BY 连在一起用的&#xff0c;放在GROUP BY 后面&#xff0c;此时的作用相当于WHERE 3.WHERE 后面的条件中不能有聚集函数&#xff0c;比如SUM(),AVG()等&#xff0c;而HAVING 可以 Where和Having都是对查询结果的一种筛选&am…
阅读更多...
系统学习前端之表单序列化

系统学习前端之表单序列化

表单序列化 1. 概述 随着Ajax的出现&#xff0c;表单的序列化已经是一个常见的需求。我们先明确表单提交时&#xff0c;浏览器是怎么样将数据发送给服务器的 对表单字段的名称和值进行URL编码&#xff08;调用encodeURIComponent()方法&#xff09;&#xff0c;使用&分隔&a…
阅读更多...
window之Flutter环境变量配置，配置国内镜像

window之Flutter环境变量配置，配置国内镜像

1.先去官网下载解压到本地 https://flutter.cn/docs/get-started/install 2.配置环境变量 我的电脑–>属性–>高级系统设置–>环境变量–>系统变量 3.检测是否配置成功 4.配置国内镜像&#xff08;非常重要&#xff0c;除非你一直保持翻墙&#xff09; 参考&a…
阅读更多...
Struts2 技术全总结 （正在更新）

Struts2 技术全总结 （正在更新）

背景&#xff1a;Struts1是一个高度成熟的框架&#xff0c;运行效率高&#xff0c;但其致命缺陷在于与JSP/Servlet的耦合非常紧密&#xff0c;因而导致了一些严重问题。其次&#xff0c;Struts1与Servlet API的严重耦合&#xff0c;使应用难以测试&#xff1b;Struts1代码严重依…
阅读更多...
Android自定义View的构造函数

Android自定义View的构造函数

自定义View是Android中一个常见的需求&#xff0c;每个自定义的View都需要实现三个基本的构造函数&#xff0c;而这三个构造函数又有两种常见的写法。 第一种 每个构造函数分别调用基类的构造函数&#xff0c;再调用一个公共的初始化方法做额外初始化。 public class MyView ex…
阅读更多...
Java实现基于Redis的分布式锁

Java实现基于Redis的分布式锁

我这里不实现JDK的java.util.concurrent.locks.Lock接口&#xff0c;而是自定义一个&#xff0c;因为JDK的有个newCondition()方法我这里暂时没实现。这个Lock提供了5个lock方法的变体&#xff0c;可以自行选择使用哪一个来获取锁&#xff0c;我的想法是最好用带超时返回的那几…
阅读更多...
最新文章

Copyright @ 2022~2023