产品经理：下班之前，实现一个瀑布流

我不是女神ヾ 2022-12-19 11:38 22阅读 0赞

1. 瀑布流是什么

瀑布流, 又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为宽度相等高度不定的元素组成的参差不齐的多栏布局，随着页面向下滚动，新的元素附加到最短的一列而不断向下加载。

2. 瀑布流的实现原理

寻找各列之中高度最小者，并将新的元素添加到该列上，然后继续寻找所有列的高度最小者，继续添加到高度最小列上，一直到所有元素均按要求排列完成为止。

3. 瀑布流的使用场景

瀑布流滑动的时候会不停的出现新的东西，吸引你不断向下探索，巧妙的利用视觉层级，视线的任意流动来缓解视觉的疲劳，采用这种方案可以延长用户停留视觉，提高用户粘度，适合那些随意浏览，不带目的性的使用场景，就像逛街一样，边走边看，所以比较适合图片、商品、资讯类的场景，很多电商相关的网站都使用了瀑布流进行承载。

4. 瀑布流的的实现有哪些问题&如何解决

如何寻找所有列的高度最小者？ 如何渲染瀑布流？

4.1 技术选型

采用 Vue 框架来实现瀑布流，其一些自带属性使我们的瀑布流实现更加简单。 通过 ref 可以很方便的获取每列高度。通过比较算法算出高度最小列。
拿到高度最小列之后，将下个要插入的元素数据放到最小列的数据列表中，通过操作数据完成元素渲染。
通过watch监测元素渲染，判断是否继续进行渲染和请求更多元素数据。

4.2 如何寻找所有列的高度最小者

每一列都定义一个ref，通过ref获取当前列的高度，然后比较高度取到最小高度，再通过最小高度算出其对应的列数。

4.3 如何渲染瀑布流

瀑布流常用在无限下拉加载或者加载数据量很大,且包含很多图片元素的情景，所以通常不会一次性拿到所有数据，也不会一次性将拿到的数据全部渲染到页面上, 否则容易造成页面卡顿影响用户体验, 所以何时进行渲染、何时继续请求数据就很关键。

4.4 何时渲染

选择渲染的区域为滚动高度+可视区域高度的1.5倍，即可以防止用户滚动到底部的时候白屏，也可以防止渲染过多影响用户体验。如果：最小列的高度 - 滚 动高度 < 可视区域高*1.5 则继续渲染元素，否则不再继续渲染。

4.5 何时请求数据

当已渲染的元素+可视区域可以展示的预估元素个数大于已请求到的个数的时候才去继续请求更多数据，防止请求浪费。如果：已加载的元素个数 + 一屏可以展示的元素预估个数 > 所有请求拿到的元素个数 则触发下一次请求去获取更多数据。

理论存在，实践开始

在这里插入图片描述

5. 开始动手

5.1 基础的样式布局，使用子绝父相。

创建商品列表的基本 html 和 css，让 item 相对于 class 为 goods 的进行排序（相对布局）

  1. <div class="goods goods-waterfall">
  2.     <div class="goods-item goods-waterfall-item" v-for="(item, index) in goodsData" :key="index" >
  3.       <img class="goods-item-img" :src="item.productImage" />
  4.       <div class="goods-item-desc">
  5.         <p class="goods-item-desc-name">
  6.           {
  7.    {item.presentation}}
  8.         </p>
  9.         <div class="goods-item-desc-data">
  10.           <p class="goods-item-desc-data-price">￥{
  11.    {item.salePrice}}</p>
  12.           <p class="goods-item-desc-data-volume">销量：{
  13.    {item.productNum}}</p>
  14.         </div>
  15.       </div>
  16.     </div>
  17.   </div>

5.2 生成不同高度的图片去撑起不同高度得到不同高度的item

  1. /** * 返回随机的图片高度 */
  2. imgHeight() { 
  3.   // 随机数 * （高度区间）+ 最低的图片高度
  4.   const result = Math.floor(
  5.     Math.random() * (this.MAX_IMG_HEIGHT - this.MIN_IMG_HEIGHT)
  6.       + this.MIN_IMG_HEIGHT,
  7.   );
  8.   return result;
  9. },
  10. /** * 根据随机高度，生成图片样式数据 */
  11. initImgStyles() { 
  12.   this.goodsData.forEach((item) => { 
  13.     this.imgStyles.push({ 
  14.       height: `${ this.imgHeight()}px`,
  15.     });
  16.   });
  17. },

将随机生成的样式添加到 img 标签上

  1. <img class="goods-item-img" :src="item.productImage" alt srcset :style="imgStyles[index]" />

5.3 计算 item 的位置，来达到 从上到下，从左到右依次排序的目的

瀑布流布局

  1. 获取到所有的 item 元素
  2. 遍历 item 元素，得到每一个 item 的高度，加上一个 margin 的高度
  3. 创建两个变量：leftHeightTotal，rightHeightTotal，分别表示左右两侧目前距离顶部的高度，通过对比左右两侧距离顶部的高度，来确定 item 的放置位置。

​ 3.1 如果左侧小于等于右侧高度的话，（leftHeightTotal <= rightHeightTotal），那么 item 应该放置在左侧。此时 item 距离左侧为 0，距离顶部为当前的 leftHeightTotal

​ 3.2 否则，item 放置到右侧，此时 item 距离右侧为 0，距离顶部为当前的 rightHeightTotal。

  1. 保存计算出的 item 的所有样式，配置到 item 上。
  2. item 配置完成之后，对比左右两侧最大的高度，最大的高度为goods 组件的高度
  1. initWaterfall() { 
  2.   const $goodsItems = this.$refs.goodsItem;
  3.   if (!$goodsItems) return;
  4.   let leftHeightTotal = 0;
  5.   let rightHeightTotal = 0;
  6.   // 遍历 item 元素，得到每一个 item 的高度，加上一个 margin 的高度
  7.   $goodsItems.forEach(($el, index) => { 
  8.     let goodsItemStyle = { };
  9.     const elHeight = $el.clientHeight + this.itemMarginBottomSize;
  10.     // 如果左侧小于等于右侧高度的话
  11.     if (leftHeightTotal <= rightHeightTotal) { 
  12.       goodsItemStyle = { 
  13.         left: '0px',
  14.         top: `${ leftHeightTotal}px`,
  15.       };
  16.       // 更新距离顶部的高度
  17.       leftHeightTotal += elHeight;
  18.     } else { 
  19.       goodsItemStyle = { 
  20.         right: '0px',
  21.         top: `${ rightHeightTotal}px`,
  22.       };
  23.       rightHeightTotal += elHeight;
  24.     }
  25.     // 保存计算出的 item 样式，动态添加到每一个 item 上面。
  26.     this.goodsItemStyles.push(goodsItemStyle);
  27.   });
  28.   // 在不需要 goods 自滑动的时候，再去计算 goodsView 的高度
  29.   if (!this.isScroll) { 
  30.     this.goodsViewHeight = (leftHeightTotal > rightHeightTotal
  31.           ? leftHeightTotal
  32.           : rightHeightTotal) + 'px'
  33.   }
  34. },

将生成的动态样式 goodsItemStyles 添加到外层的 div 上面。

可以将这个封装为一个组件，或者一个插件，数据由 props 传入。实现数据与布局解耦。

完整代码如下：

  1. <template>
  2.   <!--
  3.     瀑布流布局的基本思路
  4.     1. 创建商品列表的基本 html 和 css，让 item 相对于 class 为 goods 的进行排序（相对布局）
  5.     2. 生成不同高度的图片去撑起不同高度得 item
  6.     3. 计算 item 的位置，来达到 从上到下，从左到右依次排序的目的
  7.   -->
  8.   <div
  9.     class="goods goods-waterfall"
  10.     :style="{height: goodsViewHeight}"
  11.     ref="goods"
  12.   >
  13.     <div
  14.       class="goods-item goods-waterfall-item"
  15.       :style="goodsItemStyles[index]"
  16.       v-for="(item, index) in goodsData"
  17.       :key="index"
  18.       ref="goodsItem"
  19.     >
  20.     <!-- 给数据中的每一张图片添加随机高度的样式 -->
  21.       <img class="goods-item-img" :src="item.productImage" alt srcset :style="imgStyles[index]" />
  22.       <div class="goods-item-desc">
  23.         <p class="goods-item-desc-name">
  24.           { { item.presentation}}
  25.         </p>
  26.         <div class="goods-item-desc-data">
  27.           <p class="goods-item-desc-data-price">￥{ { item.salePrice}}</p>
  28.           <p class="goods-item-desc-data-volume">销量：{ { item.productNum}}</p>
  29.         </div>
  30.       </div>
  31.     </div>
  32.   </div>
  33. </template>
  36. <script>
  37. import axios from 'axios';
  39. export default { 
  40.   data() { 
  41.     return { 
  42.       // 最小高度
  43.       MIN_IMG_HEIGHT: 178,
  44.       // 最大高度
  45.       MAX_IMG_HEIGHT: 230,
  46.       goodsData: [],
  47.       goodsViewHeight: '100%',
  48.       itemMarginBottomSize: 8,
  49.       // 图片样式集合
  50.       imgStyles: [],
  51.       goodsItemStyles: [],
  52.       page: 1,
  53.       pageSize: 100,
  54.       sortFlag: true,
  55.       priceLevel: this.priceChecked,
  56.       priceChecked: 'all',
  57.     };
  58.   },
  59.   created() { 
  60.     this.initLayout();
  61.   },
  62.   mounted() { 
  63.     this.initData();
  64.   },
  65.   methods: { 
  66.     initData() { 
  67.       const param = { 
  68.         page: this.page,
  69.         pageSize: this.pageSize,
  70.         sort: this.sortFlag ? 1 : -1,
  71.         priceLevel: this.priceChecked,
  72.       };
  73.       axios.get('/api/goods/list', { 
  74.         params: param,
  75.       }).then((res) => { 
  76.         this.goodsData = res.data.result.list;
  77.         this.initLayout();
  78.       });
  79.     },
  80.     /** * 设置布局 */
  81.     initLayout() { 
  82.       this.goodsViewHeight = '100%';
  83.       this.goodsItemStyles = [];
  84.       this.imgStyles = [];
  85.       this.$nextTick(() => { 
  86.         this.initWaterfall();
  87.       });
  88.     },
  89.     /** * 返回随机的图片高度 */
  90.     imgHeight() { 
  91.       // 随机数 * （高度区间）+ 最低的图片高度
  92.       const result = Math.floor(
  93.         Math.random() * (this.MAX_IMG_HEIGHT - this.MIN_IMG_HEIGHT)
  94.           + this.MIN_IMG_HEIGHT,
  95.       );
  96.       return result;
  97.     },
  98.     /** * 根据随机高度，生成图片样式数据 */
  99.     initImgStyles() { 
  100.       this.goodsData.forEach((item) => { 
  101.         this.imgStyles.push({ 
  102.           height: `${ this.imgHeight()}px`,
  103.         });
  104.       });
  105.     },
  106.     /** * 瀑布流布局 * 1. 获取到所有的 item 元素 * 2. 遍历 item 元素，得到每一个 item 的高度，加上一个 margin 的高度 * 3. 创建两个变量：leftHeightTotal，rightHeightTotal，分别表示左右两侧目前距离顶部的高度 * 通过对比左右两侧距离顶部的高度，来确定 item 的放置位置。 * 3.1 如果左侧小于等于右侧高度的话，（leftHeightTotal <= rightHeightTotal），那么 item 应该放置在左侧。此时 item 距离左侧为 0，距离顶部为当前的 leftHeightTotal * 3.2 否则，item 放置到右侧，此时 item 距离右侧为 0，距离顶部为当前的 rightHeightTotal。 * 4. 保存计算出的 item 的所有样式，配置到 item 上。 * 5. item 配置完成之后，对比左右两侧最大的高度，最大的高度为goods 组件的高度 */
  107.     initWaterfall() { 
  108.       const $goodsItems = this.$refs.goodsItem;
  109.       if (!$goodsItems) return;
  110.       let leftHeightTotal = 0;
  111.       let rightHeightTotal = 0;
  112.       // 遍历 item 元素，得到每一个 item 的高度，加上一个 margin 的高度
  113.       $goodsItems.forEach(($el, index) => { 
  114.         let goodsItemStyle = { };
  115.         const elHeight = $el.clientHeight + this.itemMarginBottomSize;
  116.         // 如果左侧小于等于右侧高度的话
  117.         if (leftHeightTotal <= rightHeightTotal) { 
  118.           goodsItemStyle = { 
  119.             left: '0px',
  120.             top: `${ leftHeightTotal}px`,
  121.           };
  122.           // 更新距离顶部的高度
  123.           leftHeightTotal += elHeight;
  124.         } else { 
  125.           goodsItemStyle = { 
  126.             right: '0px',
  127.             top: `${ rightHeightTotal}px`,
  128.           };
  129.           rightHeightTotal += elHeight;
  130.         }
  131.         // 保存计算出的 item 样式，动态添加到每一个 item 上面。
  132.         this.goodsItemStyles.push(goodsItemStyle);
  133.       });
  134.       // 在不需要 goods 自滑动的时候，再去计算 goodsView 的高度
  135.       if (!this.isScroll) { 
  136.         this.goodsViewHeight = (leftHeightTotal > rightHeightTotal
  137.           ? leftHeightTotal
  138.           : rightHeightTotal) + 'px'
  139.       }
  140.     },
  141.   }
  142. };
  143. </script>
  146. <style lang="scss" scoped>
  147. @import "@css/style.scss";
  148. .goods { 
  149.   background-color: $bgColor;
  150.   &-scroll { 
  151.     overflow: hidden;
  152.     overflow-y: auto;
  153.   }
  154.   &-item { 
  155.     background-color: white;
  156.     padding: $marginSize;
  157.     box-sizing: border-box;
  159.     &-desc { 
  160.       width: 100%;
  161.       &-name { 
  162.         // 文本最多两行，超出显示省略号
  163.         font-size: $infoSize;
  164.         overflow: hidden;
  165.         text-overflow: ellipsis;
  166.         word-break: break-word;
  167.         -webkit-line-clamp: 2;
  168.         -webkit-box-orient: vertical;
  169.         display: -webkit-box;
  170.         line-height: px2rem(18);
  172.         &-hint { 
  173.           color: $textHintColor;
  174.         }
  175.       }
  177.       &-data { 
  178.         width: 100%;
  179.         display: flex;
  180.         align-items: center;
  181.         justify-content: space-between;
  182.         margin-top: $marginSize;
  183.         &-price { 
  184.           font-size: $titleSize;
  185.           color: $mainColor;
  186.           font-weight: 500;
  187.         }
  189.         &-volume { 
  190.           font-size: $infoSize;
  191.           color: $textHintColor;
  192.         }
  193.       }
  194.     }
  195.   }
  196. }
  198. // 瀑布流样式
  199. .goods-waterfall { 
  200.   position: relative;
  201.   margin: $marginSize;
  202.   &-item { 
  203.     width: 49%;
  204.     border-radius: $radiusSize;
  205.     position: absolute;
  206.     // 不指定高度，使用图片不同的高度来撑起盒子的高度
  207.     .goods-item-img { 
  208.       width: 100%;
  209.     }
  210.   }
  211. }
  212. </style>

在这里插入图片描述

你以为这就结束了？少年，你太天真了。。。

在这里插入图片描述

来来来，我们接着学

在这里插入图片描述

6. 切换不同的展示形式（垂直布局，网格布局，瀑布流布局）

如何在同一组件中去展示不同的样式：

  1. html 表示整个布局的结构，具体的展示样式，将由不同的 css 决定
  2. 每种展示样式对应不同的 css，也就是对应不同的类名（css）
    ​ 1. 垂直列表 -> goods-list
    ​ 2. 网格布局 -> goods-grid
    ​ 3. 瀑布流布局 -> goods-waterfall
  3. 实现不同的展示形式，本质就是实现不同的 css 样式。
  1. props: { 
  2.   /** 通过传入的参数，来决定展示什么样的形式 * 1：列表布局 * 2：网格布局 * 3：瀑布流布局 */
  3.   layoutType: { 
  4.     type: String,
  5.     default: '1',
  6.   },
  7. },

通过判断不同的 layoutType 决定使用的 class 类

  1. initLayout() { 
  2.   this.goodsViewHeight = '100%';
  3.   this.goodsItemStyles = [];
  4.   this.imgStyles = [];
  5.   switch (this.layoutType) { 
  6.     // 垂直列表
  7.     case '1':
  8.       (this.layoutClass = 'goods-list'),
  9.       (this.layoutItemClass = 'goods-list-item');
  10.       break;
  11.     // 网格布局
  12.     case '2':
  13.       (this.layoutClass = 'goods-grid'),
  14.       (this.layoutItemClass = 'goods-grid-item');
  15.       break;
  16.     // 瀑布流布局
  17.     case '3':
  18.       (this.layoutClass = 'goods-waterfall'),
  19.       (this.layoutItemClass = 'goods-waterfall-item');
  20.       this.initImgStyles();
  21.       this.$nextTick(() => { 
  22.         this.initWaterfall();
  23.       });
  24.       break;
  25.   }
  26. },

为最外层组件添加动态类名

  1. :class="[layoutClass, {'goods-scroll' : isScroll}]"

这样呢，我们的组件就大概完成了。把请求数据的方法放在父组件，实现解耦

  1. <template>
  2.   <!--
  3.     瀑布流布局的基本思路
  4.     1. 创建商品列表的基本 html 和 css，让 item 相对于 class 为 goods 的进行排序（相对布局）
  5.     2. 生成不同高度的图片去撑起不同高度得 item
  6.     3. 计算 item 的位置，来达到 从上到下，从左到右依次排序的目的
  8.     如何在同一组件中去展示不同的样式：
  9.     1. html 表示整个布局的结构，具体的展示样式，将由不同的 css 决定
  10.     2. 每种展示样式对应不同的 css，也就是对应不同的类名（css）
  11.       1. 垂直列表 -> goods-list
  12.       2. 网格布局 -> goods-grid
  13.       3. 瀑布流布局 -> goods-waterfall
  14.     3. 实现不同的展示形式，本质就是实现不同的 css 样式。
  15.   -->
  16.   <div
  17.     class="goods"
  18.     :class="[layoutClass, {'goods-scroll' : isScroll}]"
  19.     :style="{height: goodsViewHeight}"
  20.     @scroll="onScrollChange"
  21.     ref="goods"
  22.   >
  23.     <div
  24.       class="goods-item"
  25.       :class="layoutItemClass"
  26.       :style="goodsItemStyles[index]"
  27.       v-for="(item, index) in goodsData"
  28.       :key="index"
  29.       ref="goodsItem"
  30.     >
  31.     <!-- 给数据中的每一张图片添加随机高度的样式 -->
  32.       <img class="goods-item-img" :src="item.productImage" alt srcset :style="imgStyles[index]" />
  33.       <div class="goods-item-desc">
  34.         <p class="goods-item-desc-name">
  35.           <!-- <direct v-if="item.isDirect"></direct>
  36.           <no-have v-if="item.isHave === '有货'"></no-have> -->
  37.           { { item.presentation}}
  38.         </p>
  39.         <div class="goods-item-desc-data">
  40.           <p class="goods-item-desc-data-price">￥{ { item.salePrice}}</p>
  41.           <p class="goods-item-desc-data-volume">销量：{ { item.productNum}}</p>
  42.         </div>
  43.       </div>
  44.     </div>
  45.   </div>
  46. </template>
  49. <script>
  50. export default { 
  51.   props: { 
  52.     /** 通过传入的参数，来决定展示什么样的形式 * 1：列表布局 * 2：网格布局 * 3：瀑布流布局 */
  53.     layoutType: { 
  54.       type: String,
  55.       default: '1',
  56.     },
  57.     /** * 是否允许 goods 单独滑动 */
  58.     isScroll: { 
  59.       type: Boolean,
  60.       default: true,
  61.     },
  62.     goodsData: { 
  63.       type: Array,
  64.       default: []
  65.     }
  66.   },
  67.   data() { 
  68.     return { 
  69.       // 最小高度
  70.       MIN_IMG_HEIGHT: 178,
  71.       // 最大高度
  72.       MAX_IMG_HEIGHT: 230,
  73.       // goodsData: [],
  74.       // 不同展示形式下的类名
  75.       layoutClass: 'goods-list',
  76.       layoutItemClass: 'goods-list-item',
  77.       sortGoodsData: [],
  78.       goodsViewHeight: '100%',
  79.       itemMarginBottomSize: 8,
  80.       // 图片样式集合
  81.       imgStyles: [],
  82.       goodsItemStyles: [],
  83.       scrollTopValue: 0,
  84.     };
  85.   },
  86.   created() { 
  87.     this.initLayout();
  88.   },
  89.   mounted() { 
  90.     this.initLayout();
  91.   },
  92.   activated() { 
  93.     /** * 定位页面滑动位置，需要配合keepAlive 来使用 */
  94.     this.$refs.goods.scrollTop = this.scrollTopValue;
  95.   },
  96.   methods: { 
  97.     /** * 设置布局，为不同的 layoutType 设定不同的展示形式 * 1. 初始化影响布局的数据 * 1. goodsViewHeight -> 在垂直布局，网格布局下都是 100%，瀑布流布局下为实际高度 * 2. goodsItemStyles * 3. imgStyles * 2. 为不同的 layoutType 设置不同的展示类 */
  98.     initLayout() { 
  99.       this.goodsViewHeight = '100%';
  100.       this.goodsItemStyles = [];
  101.       this.imgStyles = [];
  102.       switch (this.layoutType) { 
  103.         // 垂直列表
  104.         case '1':
  105.           (this.layoutClass = 'goods-list'),
  106.           (this.layoutItemClass = 'goods-list-item');
  107.           break;
  108.         // 网格布局
  109.         case '2':
  110.           (this.layoutClass = 'goods-grid'),
  111.           (this.layoutItemClass = 'goods-grid-item');
  112.           break;
  113.         // 瀑布流布局
  114.         case '3':
  115.           (this.layoutClass = 'goods-waterfall'),
  116.           (this.layoutItemClass = 'goods-waterfall-item');
  117.           this.initImgStyles();
  118.           this.$nextTick(() => { 
  119.             this.initWaterfall();
  120.           });
  121.           break;
  122.       }
  123.     },
  124.     /** * 返回随机的图片高度 */
  125.     imgHeight() { 
  126.       // 随机数 * （高度区间）+ 最低的图片高度
  127.       const result = Math.floor(
  128.         Math.random() * (this.MAX_IMG_HEIGHT - this.MIN_IMG_HEIGHT)
  129.           + this.MIN_IMG_HEIGHT,
  130.       );
  131.       return result;
  132.     },
  133.     /** * 根据随机高度，生成图片样式数据 */
  134.     initImgStyles() { 
  135.       this.goodsData.forEach((item) => { 
  136.         this.imgStyles.push({ 
  137.           height: `${ this.imgHeight()}px`,
  138.         });
  139.       });
  140.     },
  141.     /** * 瀑布流布局 * 1. 获取到所有的 item 元素 * 2. 遍历 item 元素，得到每一个 item 的高度，加上一个 margin 的高度 * 3. 创建两个变量：leftHeightTotal，rightHeightTotal，分别表示左右两侧目前距离顶部的高度 * 通过对比左右两侧距离顶部的高度，来确定 item 的放置位置。 * 3.1 如果左侧小于等于右侧高度的话，（leftHeightTotal <= rightHeightTotal），那么 item 应该放置在左侧。此时 item 距离左侧为 0，距离顶部为当前的 leftHeightTotal * 3.2 否则，item 放置到右侧，此时 item 距离右侧为 0，距离顶部为当前的 rightHeightTotal。 * 4. 保存计算出的 item 的所有样式，配置到 item 上。 * 5. item 配置完成之后，对比左右两侧最大的高度，最大的高度为goods 组件的高度 */
  142.     initWaterfall() { 
  143.       const $goodsItems = this.$refs.goodsItem;
  144.       if (!$goodsItems) return;
  145.       let leftHeightTotal = 0;
  146.       let rightHeightTotal = 0;
  147.       // 遍历 item 元素，得到每一个 item 的高度，加上一个 margin 的高度
  148.       $goodsItems.forEach(($el, index) => { 
  149.         let goodsItemStyle = { };
  150.         const elHeight = $el.clientHeight + this.itemMarginBottomSize;
  151.         // 如果左侧小于等于右侧高度的话
  152.         if (leftHeightTotal <= rightHeightTotal) { 
  153.           goodsItemStyle = { 
  154.             left: '0px',
  155.             top: `${ leftHeightTotal}px`,
  156.           };
  157.           // 更新距离顶部的高度
  158.           leftHeightTotal += elHeight;
  159.         } else { 
  160.           goodsItemStyle = { 
  161.             right: '0px',
  162.             top: `${ rightHeightTotal}px`,
  163.           };
  164.           rightHeightTotal += elHeight;
  165.         }
  166.         // 保存计算出的 item 样式，动态添加到每一个 item 上面。
  167.         this.goodsItemStyles.push(goodsItemStyle);
  168.       });
  169.       // 在不需要 goods 自滑动的时候，再去计算 goodsView 的高度
  170.       if (!this.isScroll) { 
  171.         this.goodsViewHeight = (leftHeightTotal > rightHeightTotal
  172.           ? leftHeightTotal
  173.           : rightHeightTotal) + 'px'
  174.       }
  175.     },
  176.     /** * 滑动变化 */
  177.     onScrollChange($e) { 
  178.       this.scrollTopValue = $e.target.scrollTop;
  179.     },
  180.   },
  181.   watch: { 
  182.     /** * 监听布局类型切换 * 1：列表布局 * 2：网格布局 * 3：瀑布流布局 */
  183.     layoutType() { 
  184.       this.initLayout();
  185.     },
  186.   },
  187. };
  188. </script>
  191. <style lang="scss" scoped>
  192. @import "@css/style.scss";
  193. .goods { 
  194.   background-color: $bgColor;
  195.   &-scroll { 
  196.     overflow: hidden;
  197.     overflow-y: auto;
  198.   }
  199.   &-item { 
  200.     background-color: white;
  201.     padding: $marginSize;
  202.     box-sizing: border-box;
  204.     &-desc { 
  205.       width: 100%;
  206.       &-name { 
  207.         // 文本最多两行，超出显示省略号
  208.         font-size: $infoSize;
  209.         overflow: hidden;
  210.         text-overflow: ellipsis;
  211.         word-break: break-word;
  212.         -webkit-line-clamp: 2;
  213.         -webkit-box-orient: vertical;
  214.         display: -webkit-box;
  215.         line-height: px2rem(18);
  217.         &-hint { 
  218.           color: $textHintColor;
  219.         }
  220.       }
  222.       &-data { 
  223.         width: 100%;
  224.         display: flex;
  225.         align-items: center;
  226.         justify-content: space-between;
  227.         margin-top: $marginSize;
  228.         &-price { 
  229.           font-size: $titleSize;
  230.           color: $mainColor;
  231.           font-weight: 500;
  232.         }
  234.         &-volume { 
  235.           font-size: $infoSize;
  236.           color: $textHintColor;
  237.         }
  238.       }
  239.     }
  240.   }
  241. }
  243. .goods-list { 
  244.   &-item { 
  245.     display: flex;
  246.     border-bottom: 1px solid $lineColor;
  247.     .goods-item-img { 
  248.       width: px2rem(120);
  249.       height: px2rem(120);
  250.     }
  251.     .goods-item-desc { 
  252.       display: flex;
  253.       flex-direction: column;
  254.       justify-content: space-between;
  255.       padding: $marginSize;
  256.     }
  257.   }
  258. }
  260. .goods-grid { 
  261.   margin: $marginSize;
  262.   display: flex;
  263.   flex-wrap: wrap;
  264.   justify-content: space-between;
  265.   &-item { 
  266.     width: 49%;
  267.     border-radius: $radiusSize;
  268.     margin-bottom: $marginSize;
  269.     .goods-item-img { 
  270.       width: 100%;
  271.     }
  272.   }
  273. }
  275. // 瀑布流样式
  276. .goods-waterfall { 
  277.   position: relative;
  278.   margin: $marginSize;
  279.   &-item { 
  280.     width: 49%;
  281.     border-radius: $radiusSize;
  282.     position: absolute;
  283.     // 不指定高度，使用图片不同的高度来撑起盒子的高度
  284.     .goods-item-img { 
  285.       width: 100%;
  286.     }
  287.   }
  288. }
  289. </style>

在这里插入图片描述

好复杂啊，老子不想学了。改行改行，别急少年，老夫教你一个简单的，让你马上下班陪你女朋友

在这里插入图片描述

纯 CSS 实现瀑布流

基础的页面结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style> .masonry { width: 1440px; margin: 20px auto; } .item { width: 100%; margin-bottom: 30px; } .item img { width: 100%; } .item h2 { padding: 8px 0; } .item P { color: #555; } </style>
  10. </head>
  12. <body>
  13.   <div class="masonry">
  14.     <div class="item">
  15.       <img src="http://source.unsplash.com/random/400x300" />
  16.       <h2>Title Goes Here</h2>
  17.       <p>
  18.         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
  19.         deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
  20.         dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
  21.         quidem?
  22.       </p>
  23.     </div>
  24.     <div class="item">
  25.       <img src="http://source.unsplash.com/random/400x400" />
  26.       <h2>Title Goes Here</h2>
  27.       <p>
  28.         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
  29.         deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
  30.         dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
  31.         quidem?
  32.       </p>
  33.     </div>
  34.     <div class="item">
  35.       <img src="http://source.unsplash.com/random/400x500" />
  36.       <h2>Title Goes Here</h2>
  37.       <p>
  38.         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
  39.         deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
  40.         dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
  41.         quidem?
  42.       </p>
  43.     </div>
  44.     <div class="item">
  45.       <img src="http://source.unsplash.com/random/400x600" />
  46.       <h2>Title Goes Here</h2>
  47.       <p>
  48.         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
  49.         deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
  50.         dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
  51.         quidem?
  52.       </p>
  53.     </div>
  54.     <div class="item">
  55.       <img src="http://source.unsplash.com/random/400x800" />
  56.       <h2>Title Goes Here</h2>
  57.       <p>
  58.         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
  59.         deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
  60.         dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
  61.         quidem?
  62.       </p>
  63.     </div>
  64.     <div class="item">
  65.       <img src="http://source.unsplash.com/random/400x750" />
  66.       <h2>Title Goes Here</h2>
  67.       <p>
  68.         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
  69.         deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
  70.         dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
  71.         quidem?
  72.       </p>
  73.     </div>
  74.     <div class="item">
  75.       <img src="http://source.unsplash.com/random/400x600" />
  76.       <h2>Title Goes Here</h2>
  77.       <p>
  78.         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
  79.         deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
  80.         dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
  81.         quidem?
  82.       </p>
  83.     </div>
  84.     <div class="item">
  85.       <img src="http://source.unsplash.com/random/400x600" />
  86.       <h2>Title Goes Here</h2>
  87.       <p>
  88.         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
  89.         deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
  90.         dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
  91.         quidem?
  92.       </p>
  93.     </div>
  94.   </div>
  95.   <script> </script>
  96. </body>
  98. </html>

非常简单的结构
加上 columns 属性，立马变得不一样

  1. .masonry { 
  2.       width: 1440px;
  3.       margin: 20px auto;
  4.       columns: 4;
  5.       column-gap: 30px;
  6. }
  8. .item { 
  9.       width: 100%;
  10.       break-inside: avoid;
  11.       margin-bottom: 30px;
  12. }

在这里插入图片描述
是不是相当简单嘞

赶快写完，约会去吧

参考文章：https://segmentfault.com/a/1190000023103516

发表评论

表情：
评论列表 （有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

    相关 产品经理

    1，干什么的       得到具体需求，转化为产品功能需求，得到大概功能规划，再调研同类竞品调研，看看有什么好的方案和坑，并最终确定功能逻辑，写成产品文档 产品经理的工作流

    电玩女神电玩女神/ 0 赞/ 353 阅读

    相关 产品经理

    2015年已经来到石榴如火的5月，没错，小半年就快过去了。很多同学正在毕业找工作，也有些同学在准备着2015的暑期实习。而进入4A、BAT、500强是很大部分营销和传媒人的选择

    阳光穿透心脏的1/2处阳光穿透心脏的1/2处/ 0 赞/ 478 阅读