【原生js】好玩的瀑布流


内容

原生的瀑布流思路分析以及具体实现

屡屡思路

①:何为瀑布流:
【原生js】好玩的瀑布流

②:需求:图片不变形、展示区域不留白
③:需求分析:图片都遵循等宽不等高的样式
【原生js】好玩的瀑布流
注意:第一排图片可不做处理(让css 操作其样式),从第二排开始,每张图片都需要遍历追加,追加的位置是每一次高度最低的位置(凹陷处

示例实现

js 代码块(保姆级注释)

window.addEventListener('load', () => {
var boxWidth = document.querySelector('.box').offsetWidth; // # 求出一个盒子的宽度(offsetWidth 返回值包括 padding)
var containerWidth = document.querySelector('.container').offsetWidth; // # 求出父容器的宽度
var col = parseInt(containerWidth / boxWidth) //# 求出一排有几列
var boxs = document.querySelectorAll('.box'); //# 拿到所有的盒子,优化计算
var heightArr = []; //# 定义空数组,来装每一排图片的高度
boxs.forEach((item, index) => { //# 遍历所有盒子
if (index < col) {
heightArr[index] = item.offsetHeight; //# 如果是第一排,直接排序(不定位),且每一次循环把图片高度装入数组
} else {
var minHeightBox = Math.min(...heightArr); //# 求出一排中最小高度的图片(每次追加图片至最小高度下)
var minHeightIndex = heightArr.findIndex(item => item == minHeightBox); //# 找出最小高度图片的索引
item.style.position = 'absolute'; //# 从第二排起,每张图片都要定位追加
item.style.top = minHeightBox + 'px'; //# 距顶部等于最小图片的高度
item.style.left = minHeightIndex * boxWidth + 'px'; // # 距左侧等于最小图片的索引 * 每个盒子的宽度(切记盒子等宽不等高)
heightArr[minHeightIndex] += item.offsetHeight; //# 图片加入后,把其高度追加入数组。确保后续追加
}
})
})

对于css 演示,自愧丑的不行,就不展示了哈。

小技巧:扣代码时可以打印出浏览器窗口的实时大小,方便计算。

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

【原生js】好玩的瀑布流

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 【原生js】好玩的瀑布流
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏