耀极客论坛

 找回密码
 立即注册
查看: 691|回复: 0

实现瀑布流布局的三种方式

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 01:02:19 | 显示全部楼层 |阅读模式
  本文详细讲解了实现瀑布流布局的三种方式,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
前言
  今天逛闲鱼的时候观察到每一行的高度不是相同的,经了解才知道原来这是一种瀑布流布局,感觉挺有意思,于是决定研究一下,在网上也找了一些方案,实现瀑布流大概有3种方式。
一、JS 实现瀑布流
  思路分析
       
  • 瀑布流布局的特点是等宽不等高。   
  • 为了让最后一行的差距最小,从第二行开始,需要将图片放在第一行最矮的图片下面,以此类推。   
  • 父元素设置为相对定位,图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。
  代码实现
  1. ‹!DOCTYPE html>
  2. ‹html>
  3. ‹head>
  4.     ‹style>
  5.         .box {
  6.             width: 100%;
  7.             position:relative;
  8.         }
  9.         .item {
  10.             position: absolute;
  11.         }
  12.         .item img{
  13.             width: 100%;
  14.             height:100%;
  15.         }
  16.     ‹/style>
  17. ‹/head>
  18. ‹body>
  19. ‹div class="box">
  20.     ‹div class="item">
  21.         ‹img  src="banner.jpg" alt="" />
  22.     ‹/div>
  23.     ‹div class="item">
  24.         ‹img  src="show.jpg" alt="" />
  25.     ‹/div>
  26.     ‹div class="item">
  27.         ‹img  src="cloth.jpg" alt="" />
  28.     ‹/div>
  29.     ‹div class="item">
  30.         ‹img  src="banner.jpg" alt="" />
  31.     ‹/div>
  32.     ‹div class="item">
  33.         ‹img  src="show.jpg" alt="" />
  34.     ‹/div>
  35.     ‹div class="item">
  36.         ‹img  src="cloth.jpg" alt="" />
  37.     ‹/div>
  38.     ‹div class="item">
  39.         ‹img  src="banner.jpg" alt="" />
  40.     ‹/div>
  41.     ‹div class="item">
  42.         ‹img  src="show.jpg" alt="" />
  43.     ‹/div>
  44.     ‹div class="item">
  45.         ‹img  src="cloth.jpg" alt="" />
  46.     ‹/div>
  47.     ‹div class="item">
  48.         ‹img  src="show.jpg" alt="" />
  49.     ‹/div>
  50.     ‹div class="item">
  51.         ‹img  src="cloth.jpg" alt="" />
  52.     ‹/div>
  53.     ‹div class="item">
  54.         ‹img  src="banner.jpg" alt="" />
  55.     ‹/div>
  56. ‹/div>
  57. ‹/body>
  58. ‹script src="jquery.min.js">‹/script>
  59. ‹script>
  60.     function waterFall() {
  61.         // 1 确定图片的宽度 - 滚动条宽度
  62.         var pageWidth = getClient().width-8;
  63.         var columns = 3; //3列
  64.         var itemWidth = parseInt(pageWidth/columns); //得到item的宽度
  65.         $(".item").width(itemWidth); //设置到item的宽度
  66.         var arr = [];
  67.         $(".box .item").each(function(i){
  68.             var height = $(this).find("img").height();
  69.             if (i ‹ columns) {
  70.                 // 2 第一行按序布局
  71.                 $(this).css({
  72.                     top:0,
  73.                     left:(itemWidth) * i+20*i,
  74.                 });
  75.                 //将行高push到数组
  76.                 arr.push(height);
  77.             } else {
  78.                 // 其他行
  79.                 // 3 找到数组中最小高度  和 它的索引
  80.                 var minHeight = arr[0];
  81.                 var index = 0;
  82.                 for (var j = 0; j ‹ arr.length; j++) {
  83.                     if (minHeight > arr[j]) {
  84.                         minHeight = arr[j];
  85.                         index = j;
  86.                     }
  87.                 }
  88.                 // 4 设置下一行的第一个盒子位置
  89.                 // top值就是最小列的高度
  90.                 $(this).css({
  91.                     top:arr[index]+30,//设置30的距离
  92.                     left:$(".box .item").eq(index).css("left")
  93.                 });
  94.                 // 5 修改最小列的高度
  95.                 // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
  96.                 arr[index] = arr[index] + height+30;//设置30的距离
  97.             }
  98.         });
  99.     }
  100.     //clientWidth 处理兼容性
  101.     function getClient() {
  102.         return {
  103.             width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
  104.             height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  105.         }
  106.     }
  107.     // 页面尺寸改变时实时触发
  108.     window.onresize = function() {
  109.         //重新定义瀑布流
  110.         waterFall();
  111.     };
  112.     //初始化
  113.     window.onload = function(){
  114.         //实现瀑布流
  115.         waterFall();
  116.     }
  117. ‹/script>
  118. ‹/html>
复制代码
  效果如下

二、column 多行布局实现瀑布流
  思路分析:
       
  • column 实现瀑布流主要依赖两个属性。   
  • 一个是 column-count 属性,是分为多少列。   
  • 一个是 column-gap 属性,是设置列与列之间的距离。
  代码实现:
  1. ‹!DOCTYPE html>
  2. ‹html>
  3. ‹head>
  4.     ‹style>
  5.         .box {
  6.             margin: 10px;
  7.             column-count: 3;
  8.             column-gap: 10px;
  9.         }
  10.         .item {
  11.             margin-bottom: 10px;
  12.         }
  13.         .item img{
  14.             width: 100%;
  15.             height:100%;
  16.         }
  17.     ‹/style>
  18. ‹/head>
  19. ‹body>
  20. ‹div class="box">
  21.     ‹div class="item">
  22.         ‹img  src="banner.jpg" alt="" />
  23.     ‹/div>
  24.     ‹div class="item">
  25.         ‹img  src="show.jpg" alt="" />
  26.     ‹/div>
  27.     ‹div class="item">
  28.         ‹img  src="cloth.jpg" alt="" />
  29.     ‹/div>
  30.     ‹div class="item">
  31.         ‹img  src="banner.jpg" alt="" />
  32.     ‹/div>
  33.     ‹div class="item">
  34.         ‹img  src="show.jpg" alt="" />
  35.     ‹/div>
  36.     ‹div class="item">
  37.         ‹img  src="cloth.jpg" alt="" />
  38.     ‹/div>
  39.     ‹div class="item">
  40.         ‹img  src="banner.jpg" alt="" />
  41.     ‹/div>
  42.     ‹div class="item">
  43.         ‹img  src="show.jpg" alt="" />
  44.     ‹/div>
  45.     ‹div class="item">
  46.         ‹img  src="cloth.jpg" alt="" />
  47.     ‹/div>
  48.     ‹div class="item">
  49.         ‹img  src="show.jpg" alt="" />
  50.     ‹/div>
  51.     ‹div class="item">
  52.         ‹img  src="cloth.jpg" alt="" />
  53.     ‹/div>
  54.     ‹div class="item">
  55.         ‹img  src="banner.jpg" alt="" />
  56.     ‹/div>
  57. ‹/div>
  58. ‹/body>
复制代码
  效果如下:

三、flex 弹性布局实现瀑布流
  思路分析:
  flex 实现瀑布流需要将最外层元素设置为 display: flex,即横向排列。然后通过设置 flex-flow:column wrap 使其换行。设置 height: 100vh 填充屏幕的高度,来容纳子元素。每一列的宽度可用 calc 函数来设置,即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin 距离。
  代码实现:
  1. ‹!DOCTYPE html>
  2. ‹html>
  3. ‹head>
  4.     ‹style>
  5.         .box {
  6.           display: flex;  
  7.           flex-flow:column wrap;
  8.           height: 100vh;
  9.         }
  10.         .item {
  11.             margin: 10px;
  12.             width: calc(100%/3 - 20px);
  13.         }
  14.         .item img{
  15.             width: 100%;
  16.             height:100%;
  17.         }
  18.     ‹/style>
  19. ‹/head>
  20. ‹body>
  21. ‹div class="box">
  22.     ‹div class="item">
  23.         ‹img  src="banner.jpg" alt="" />
  24.     ‹/div>
  25.     ‹div class="item">
  26.         ‹img  src="show.jpg" alt="" />
  27.     ‹/div>
  28.     ‹div class="item">
  29.         ‹img  src="cloth.jpg" alt="" />
  30.     ‹/div>
  31.     ‹div class="item">
  32.         ‹img  src="banner.jpg" alt="" />
  33.     ‹/div>
  34.     ‹div class="item">
  35.         ‹img  src="show.jpg" alt="" />
  36.     ‹/div>
  37.     ‹div class="item">
  38.         ‹img  src="cloth.jpg" alt="" />
  39.     ‹/div>
  40.     ‹div class="item">
  41.         ‹img  src="banner.jpg" alt="" />
  42.     ‹/div>
  43.     ‹div class="item">
  44.         ‹img  src="show.jpg" alt="" />
  45.     ‹/div>
  46.     ‹div class="item">
  47.         ‹img  src="cloth.jpg" alt="" />
  48.     ‹/div>
  49.     ‹div class="item">
  50.         ‹img  src="show.jpg" alt="" />
  51.     ‹/div>
  52.     ‹div class="item">
  53.         ‹img  src="cloth.jpg" alt="" />
  54.     ‹/div>
  55.     ‹div class="item">
  56.         ‹img  src="banner.jpg" alt="" />
  57.     ‹/div>
  58. ‹/div>
  59. ‹/body>
复制代码
  效果如下:

四、3种方式对比
  如果只是简单的页面展示,可以使用 column 多栏布局和 flex 弹性布局。如果需要动态添加数据,或者动态设置列数,就需要使用到 JS + jQuery。
  以上所述是小编给大家介绍的实现瀑布流布局的三种方式,希望对大家有所帮助。在此也非常感谢大家对脚本之家网站的支持!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 12:27 , Processed in 0.073270 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表