淘宝联盟推广网站怎么做,沈阳中小企业网站建设,广告公司网站(附falsh及源代码),wordpress存储瀑布流布局 文章目录 瀑布流布局前言1. 背景2. 点⬇️#x1f517;去体验效果如下图所示#xff1a; 一、初版waterfall布局和问题暴露#xff1f;1.效果图如下#xff1a;2.暴露问题如下图所示#xff1a;第一张问题图#xff1a;第二张问题图#xff1a; 3.HTML代码如…瀑布流布局 文章目录 瀑布流布局前言1. 背景2. 点⬇️去体验效果如下图所示 一、初版waterfall布局和问题暴露1.效果图如下2.暴露问题如下图所示第一张问题图第二张问题图 3.HTML代码如下4.JS代码如下 二、初版waterfall布局问题的排查和解决1.排查问题2.解决问题第一种解决方法设置块级作用域行不通代码修改如下图所示修改后如下图所示依然有插入顺序问题 第二种解决方法改变每一列高度的获取方式成功了代码修改如下图所示图1如下waterfall布局正常渲染图2如下waterfall布局正常渲染 3.完整代码 方获取 总结完整代码文件点击下方晚些更新进阶版 前言 起初我看网上有很多处理waterfall的处理方案但是我都没去仔细的去阅读主要是我相信我自己也可以做出来事实如此我做出来了。 后面也可能会对当前的版本进行二次优化。学习一下别人的优秀想法。 ⚠️⚠️⚠️提供这个容易理解的版本后续会发布精简版本或者附加功能版本 功能包括图片懒加载、触底加载数据、展示的虚拟列表优化、响应式等功能。 1. 背景
为什么突然要去尝试写一个瀑布流布局 首先很早之前我就看到【小红书】主站就采用了这种 waterfall布局进行的展示。 其次负责这块内容的同学是我前一个组的同事哈哈哈哈哈。 然后我就大概去调试了一下【小红书】主站上的瀑布流第一感觉那是相当的丝滑很牛逼很高大上 最后waterfall布局也可以搭配很多其他的功能例如触底加载图片懒加载Dom结构懒加载等。 【小红书】主战的waterfall布局他使用的是 绝对定位 Css的样式进行开发的。这种waterfall布局的优势就是可以避免当前的网页一直被重绘。古德古德 2. 点⬇️去体验
waterfall体验
效果如下图所示 一、初版waterfall布局和问题暴露
1.效果图如下 2.暴露问题如下图所示 在首页中也可以看到错误的顺序。初版构思的waterfall布局并没有按照最小的长度的盒子的顺序插入而是一个比较乱的状态。 第一张问题图 第二张问题图 3.HTML代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlewaterFall/titlestyle#water-fall-main {display: flex;gap: 8px;position: relative;width: 100%;justify-content: space-around;}.water-fall-columns {width: 250px;/* border: 1px solid red; */display: flex;flex-direction: column;align-items: center;gap: 8px;}.water-fall-item {width: 232px;}/style
/headbodydiv idwater-fall-main/div
/body/html4.JS代码如下 //获取瀑布流的主元素const waterFallMain document.querySelector(#water-fall-main)const createDomContainer []const setCurrentPageColumns (width) {const currentOutterWidth widthreturn Math.floor(currentOutterWidth / 250)}const setRangeWidth () {const height Math.floor(Math.random() * 450)return height 225 ? height : 200}const setRandomWaterItemNumber () {const number Math.floor(Math.random() * 100)return number 25 ? number : 50}const setRandomColor () {const colorArr [#f39999, #7f5555, #94eca1, #dd9757, #98f2b0, #75e1ef, #5e47e8, #c652ef,]return colorArr[Math.floor(Math.random() * colorArr.length)]}//第一次进入页面渲染的盒子const defaultRender () {const columnsNumber setCurrentPageColumns(document.body.clientWidth)for (let index 1; index columnsNumber; index) {const div document.createElement(div)div.className water-fall-columnscreateDomContainer.push(div)waterFallMain.appendChild(div)}const domArrLength createDomContainer.map(container container.offsetHeight);const numbersItem setRandomWaterItemNumber()for (let index 0; index numbersItem; index) {const domContent document.querySelectorAll(.water-fall-columns)const div document.createElement(div)const height setRangeWidth()div.style.height height pxdiv.style.backgroundColor setRandomColor()div.className water-fall-itemdiv.innerText index 1let resultLength domArrLength.reduce((pre, cur, curIndex) {return pre cur ? cur : pre;}, domArrLength[0])let lastIndex domArrLength.indexOf(resultLength)const allBox document.querySelectorAll(.water-fall-columns)allBox.forEach((v, k) {if (k lastIndex) {v.appendChild(div)domArrLength[k] v.offsetHeight}})}} 二、初版waterfall布局问题的排查和解决
1.排查问题 首先我通过上面的位置错误可以显而易见的发现是每个盒子的高度获取或者插入盒子的位置, 二者其中一个存在一定的问题。然后经过排查发现通过dom.offsetHeight这个属性获取盒子的时候并不能返回当前盒子的高度而且会出现前一个盒子的offsetHeight居然在遍历的过程中影响到后面的盒子高度偶尔发生,所以就导致了出现上面的情况。 2.解决问题 从排查的问题的结果中发现是因为每一列的高度计算出现了问题所以这个时候就好办了。 第一种解决方法设置块级作用域行不通
因为是获取高度出现的问题有没有一种可能是没有块级作用域导致的问题 我紧接着就进行了尝试。
代码修改如下图所示 修改后如下图所示依然有插入顺序问题
头部的图是这样尾部的图也是与前端一致的所以果断放弃了往这方面思考 第二种解决方法改变每一列高度的获取方式成功了
因为是要计算每一列的高度所以我从原来获取插入后的高度》插入一个元素就在当前列添加这个元素的高度实现一个累加的效果。
代码修改如下图所示 图1如下waterfall布局正常渲染 图2如下waterfall布局正常渲染 3.完整代码 方获取
点我跳转 总结完整代码文件点击下方晚些更新进阶版 从开始接触这个功能 ➡️➡️ 构思解决方案 ➡️➡️ 解决方案验证 ➡️➡️ 方案基本实现 ➡️➡️ 问题发现 ➡️➡️ 解决问题。整个流程下来呢合计不超过1.5d。更多的是思考需要的时间会更加的多。 完整的代码请点击
希望大家都可以找到自己感兴趣的事情
