纯css瀑布流布局示例详细讲解

这是我在做公司官网时候遇到的问题,UI设计图样式如下:
在这里插入图片描述

问题分析:

首先,看见这个UI设计图:它呈左右两列不规则分布,而且也能发现width宽度、heigth高度等都不相同。

思路分析:

毫无疑问,我们用简单的div布局+css做的话是可以达到这样的效果的,只是这样很low,不灵活,而且需要反复布局排版,代码量也不简单!
此时,这个用瀑布流的话会简单不少!

原理+实现:

瀑布流:又称瀑布流式布局,是比较流行的一种网站页面布局方式,能够提升用户的体验感。它是多行等宽元素排列,等宽不等高或者宽高都不相同,后面的元素依次添加到其后!根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。

主要知识点
column-count:这是一个可以设置将div元素中的文本分成几列,默认值是:auto;

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

注意:IE9及更早 IE 版本浏览器不支持 column-count 属性 。此时引入另一个知识点·column-gap,用来调整边距

html:

<div class="step6-waterfull">
 <div class="step6-waterfull-item">
   <img src="../../../assets/images/home/img_926.png" alt="">
 </div>
 <div class="step6-waterfull-item">
   <img src="../../../assets/images/home/img_927.png" alt="">
 </div>
 <div class="step6-waterfull-item">
   <img src="../../../assets/images/home/img_928.png" alt="">
 </div>
 <div class="step6-waterfull-item">
   <img src="../../../assets/images/home/img_922.png" alt="">
 </div>
 <div class="step6-waterfull-item">
   <img src="../../../assets/images/home/img_923.png" alt="">
 </div>
 <div class="step6-waterfull-item">
   <img src="../../../assets/images/home/img_924.png" alt="">
 </div>
 <div class="step6-waterfull-item">
   <img src="../../../assets/images/home/img_925.png" alt="">
 </div>
</div>

css:

.step6-waterfull {
  width: 100%;
  min-height: 500px;
  margin-top: 120px;
  display:inline-block;
  overflow: hidden; //控制宽度
  column-count:2; //列数
  -moz-column-count:2; /* Firefox */
  -webkit-column-count:2; /* Safari 和 Chrome */
  column-gap: 30px;/*  IE9以下浏览器版本兼容 */
  -moz-column-gap: 30px; 
  -webkit-column-gap: 30px;

  .step6-waterfull-item {
    text-align: right;
    margin-bottom: 16px;
  }
}
结果展示:

在这里插入图片描述
我这里用的是纯css做的,也可以用js或者插件实现!

补充知识点:
<div class="step6-waterfull">
  <div class="step6-waterfull-item">1</div>
  <div class="step6-waterfull-item">2</div>
  <div class="step6-waterfull-item">3</div>
  <div class="step6-waterfull-item">4</div>
  <div class="step6-waterfull-item">5</div>
  <div class="step6-waterfull-item">6</div>
  <div class="step6-waterfull-item">7</div>
  <div class="step6-waterfull-item">8</div>
  <div class="step6-waterfull-item">9</div>
  <div class="step6-waterfull-item">10</div>
  <div class="step6-waterfull-item">11</div>
</div>

效果图:
在这里插入图片描述
可以从图中看出,瀑布流的排布为从上到下,不是从从左到右这个。知道这点对于布局排版有帮助。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要实现CSS瀑布流布局的两列效果,可以通过以下步骤进行操作: 1. 使用弹性盒子(flexbox)布局。将父容器(container)设置为弹性盒子,设置其flex-direction属性为column,这样子元素会按列排列。 2. 指定每个子元素(item)的宽度为50%(或是其他任意所需的宽度),这样就可以实现两列布局。 3. 根据需求,可以对子元素进行其他样式的调整,比如给图片设置宽度为100%等。 以下是示例代码: ```css .container{ display: flex; flex-direction: column; } .item{ width: 50%; } .item img{ width: 100%; } ``` 通过以上步骤,你可以实现CSS瀑布流布局的两列效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [CSS3不规则瀑布流布局特效](https://download.csdn.net/download/weixin_38665668/16319388)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CSS总结——瀑布流布局](https://blog.csdn.net/m0_67401660/article/details/126099099)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值