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

最新推荐文章于 2022-05-08 18:19:07 发布

柒柒兮

最新推荐文章于 2022-05-08 18:19:07 发布

阅读量172

点赞数

分类专栏：布局文章标签： html js flex

本文链接：https://blog.csdn.net/qq_28948031/article/details/119533984

版权

静态实现

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

最低0.47元/天解锁文章

柒柒兮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流的实现、动态数据绑定、简单封装可根据需求动态传入一行几列的布局

静态实现<!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;}.f
复制链接

扫一扫