网站建设分金手指排名八,wordpress ie6 内核,蛋糕设计网站,wordpress后台使用教程前端功能问题系列文章#xff0c;点击上方合集↑
序言
大家好#xff0c;我是大澈#xff01;
本文约2500字#xff0c;整篇阅读大约需要4分钟。
本文主要内容分三部分#xff0c;如果您只需要解决问题#xff0c;请阅读第一、二部分即可。如果您有更多时间#xff…前端功能问题系列文章点击上方合集↑
序言
大家好我是大澈
本文约2500字整篇阅读大约需要4分钟。
本文主要内容分三部分如果您只需要解决问题请阅读第一、二部分即可。如果您有更多时间进一步学习问题相关知识点请阅读至第三部分。
感谢关注微信公众号“程序员大澈”然后加入问答群从此让解决问题的你不再孤单
1. 需求分析
在电商前台项目中使用瀑布流的布局形式展示商品图片列表。
让用户在浏览商品列表时总有商品图片看不全使用户可以无限滚动地查看列表下面的其它商品内容。
进而提高用户浏览量增加商品曝光度最终提升用户购买几率。 2. 实现步骤
2.1 什么是瀑布流布局呢
瀑布流布局是页面上是一种参差不齐的多栏布局。
随着页面滚动条向下滚动这种布局会不断加载新的数据内容并附加至当前高度最低列的尾部。
它的特点是布局宽度一致高度不一致上下错落排列。一般用于图片内容的展示。 2.2 代码实现
模版代码
一行要展示几条数据就定义几个column元素。这里以三列为例。
templatediv classpage-maindiv classcarddiv classcoloum1divclasscard-itemv-for(item, index) in cardList1:keyindex:style[{ background: item.color },{ height: item.height },{ lineHeight: item.height },]:class{ visibles: isVisibility }p classtext{{ item.num }}/p/div/divdiv classcoloum2divclasscard-itemv-for(item, index) in cardList2:keyindex:style[{ background: item.color },{ height: item.height },{ lineHeight: item.height },]:class{ visibles: isVisibility }p classtext{{ item.num }}/p/div/divdiv classcoloum3divclasscard-itemv-for(item, index) in cardList3:keyindex:style[{ background: item.color },{ height: item.height },{ lineHeight: item.height },]:class{ visibles: isVisibility }p classtext{{ item.num }}/p/div/div/div/div
/template逻辑代码
第一次渲染时先把已有数据按顺序正常展示。
然后利用nextTick钩子在第二次渲染时先获取所有元素再循环遍历所有元素再从第二行第一个元素开始计算每一列高度和的最小值把新数据放到最小高度列的数组数据中。以此类推判断完所有已获取元素。
这里在两次渲染之间可能会出现页面闪烁现象所以做了元素显示隐藏的样式处理。
再就是有多少列则定义多少新的空数组。这里以三列为例。
script setup
import { ref, onMounted, reactive, nextTick } from vue;// 展示数据
const cardList reactive([{num: 1号 100px,color: #3498db,height: 100px,},{num: 2号 200px,color: #2ecc71,height: 200px,},{num: 3号 60px,color: #27ae60,height: 60px,},{num: 4号 80px,color: #e67e22,height: 80px,},{num: 5号 60px,color: #e74c3c,height: 60px,},{num: 6号 200px,color: #7f8c8d,height: 200px,},
]);// 由于渲染时候对数据的两次赋值则会出现一次闪烁需要做显示隐藏处理
const isVisibility ref(true);onMounted(() {// 第一次渲染赋值equallyCard();// 第二次渲染赋值nextTick(() {caLFlex();}).then(() {// 闪烁显示隐藏处理isVisibility.value true;});
});// 各列的展示数据
const cardList1 ref([]);
const cardList2 ref([]);
const cardList3 ref([]);// 第一次渲染赋值
function equallyCard() {// 平分3列的数据确保页面上遍历卡片dom的真实顺序与平分的一致let num parseInt(cardList.length / 3);cardList.forEach((item, index) {if (index num) {cardList1.value.push(item);return;}if (index 2 * num) {cardList2.value.push(item);return;}cardList3.value.push(item);});
}// 第二次渲染赋值
function caLFlex() {let arr1 []; // 第一列的新值let arr2 []; // 第二列的新值let arr3 []; // 第三列的新值let heightArry_1 []; // 第一列的卡片高度let heightArry_2 []; // 第二列的卡片高度let heightArry_3 []; // 第三列的卡片高度Array.from(document.querySelectorAll(.card-item)).forEach((item, index) {// 第一行中的元素无需判断直接加到新数组中if (index 0) {heightArry_1.push(item.offsetHeight);arr1.push(cardList[index]);return;}if (index 1) {heightArry_2.push(item.offsetHeight);arr2.push(cardList[index]);return;}if (index 2) {heightArry_3.push(item.offsetHeight);arr3.push(cardList[index]);return;}// 计算每一列高度const heightTotal_1 heightArry_1.length? Array.from(heightArry_1).reduce((accumulator, currentValue) accumulator currentValue): 0; // 第一列的总高度const heightTotal_2 heightArry_2.length? Array.from(heightArry_2).reduce((accumulator, currentValue) accumulator currentValue): 0; // 第二列的总高度const heightTotal_3 heightArry_3.length? Array.from(heightArry_3).reduce((accumulator, currentValue) accumulator currentValue): 0; // 第三列的总高度// 找到高度最小值并在最小高度新数组中添加新数据let minNumber Math.min(heightTotal_1, heightTotal_2, heightTotal_3);switch (minNumber) {case heightTotal_1:heightArry_1.push(item.offsetHeight);arr1.push(cardList[index]);break;case heightTotal_2:heightArry_2.push(item.offsetHeight);arr2.push(cardList[index]);break;case heightTotal_3:heightArry_3.push(item.offsetHeight);arr3.push(cardList[index]);break;}});// 重新将数据赋值给各列数组cardList1.value arr1;cardList2.value arr2;cardList3.value arr3;
}
/script样式代码
使用了flex布局来做行的排版。这里根据个人项目实际需求自定义即可。
style langscss scoped
.page-main {background: #ffffff;height: 100vh;overflow: hidden;padding: 0 30px;.card {display: flex;flex-direction: row;justify-content: space-around;.card-item {visibility: hidden;margin-bottom: 20px;text-align: center;width: 216px;border-radius: 16px;}.visibles {visibility: visible;}}
}
/style
3. 问题详解
3.1 关于NextTick的个人拙见
作用等待DOM更新后再执行内部传入的回调函数
使用场景 created中想要获取DOM 响应式数据变化后获取DOM更新后的状态如 获取列表更新后的高度
原理 把nextTick回调方法放在renderWatcher回调之后执行这样就能拿到更新后的DOM 3.2 瀑布流其它实现方式
关于瀑布流的实现方式网上真的是五花八门各种方法都有。
但因为精力有限其它方式我也没有再去尝试只挑选了这么一种比较常用的实现方式也就是flex布局js动态计算列高度的方式。我觉的这种方式就足够了尝试用着还不错。
当然本次实现的代码不会是大澈个人空想而来一定是站在了某位大佬的肩膀之上又加上了一些个人的理解和拙见才分享给了朋友们。
最后也放上参考大佬的文章地址大佬各种实现方式讲的挺全的供大家参考http://d5rhe.jbdi.cn/7b。
结语
建立这个平台的初衷 打造一个仅包含前端问题的问答平台让大家高效搜索处理同样问题。 通过不断积累问题一起练习逻辑思维并顺便学习相关的知识点。 遇到难题遇到有共鸣的问题一起讨论一起沉淀一起成长。
感谢关注微信公众号“程序员大澈”然后加入问答群从此让解决问题的你不再孤单
