当前位置: 首页 > news >正文

js,瀑布流

该方法仅满足,元素等宽,高度一般不同的瀑布流布局

  1. 计算元素宽度与浏览器宽度之比,得到布局列数;
  2. 将未布局的元素依次布局至高度最小的那一列;
  3. 页面滚动时继续加载数据,动态地渲染在页面上。
<div id="parent"><div id="masonry_container"><div class="masonry_item" v-for="(item,index) in 10" :key="index"><h3>标题{{index+1}}</h3><p>内容{{index+1}}</p></div></div>
</div>
masonryLayouts(marginLeft = 0, marginTop = 0){ // 瀑布流布局var containerWidth=document.getElementById("masonry_container").width; // 容器的宽度var eleWidth=500; // 每个元素宽度为500pxvar cols=parseInt(containerWidth/eleWidth); // 瀑布流布局的列数document.getElementById("masonry_container").style.width=eleWidth*cols+"px";// 设置容器宽度,为了居中显示,添加position:relativevar colsHeight=new Array(cols).fill(0);; // 保存每列当前高度,初始为0var eles=document.getElementsByClassName("masonry_item");for(var i=0;i<eles.length;i++){var minHeightCol=0; // 保存当前最短列的索引for(var j=1;j<cols;j++){if(colsHeight[j]<colsHeight[minHeightCol]){minHeightCol=j;}}eles[i].style.left=eleWidth*minHeightCol + marginLeft  +"px"; // 元素定位eles[i].style.top=colsHeight[minHeightCol] +"px";// position: absolute,定位添加左边距和上边距colsHeight[minHeightCol]+=(window.getComputedStyle(eles[i]).height)+marginTop ; // 更改当前列高度document.getElementById('masonry_container').style.height = `${colsHeight[minHeightCol] + 100}px`; // 把父容器的高度撑开}
}
http://www.lryc.cn/news/103625.html

相关文章:

  • “深入了解Spring Boot:从入门到精通“
  • 记录时间计算bug getDay()的一个坑
  • 【lesson5】linux vim介绍及使用
  • 【玩转Linux】Linux输入子系统简介
  • grid map学习笔记2之grid map的一些常规定义和功能包说明
  • Python-文件操作
  • windows中注册redis服务启动时报1067错误
  • 大数据面试题:HBase的RegionServer宕机以后怎么恢复的?
  • ansible的脚本——playbook剧本
  • 【系统监控程序】
  • 计算机论文中名词翻译和解释笔记
  • 读书笔记-《ON JAVA 中文版》-摘要20[第十九章 类型信息-1]
  • 3、Linux驱动开发:模块_传递参数
  • 基于 ThinkPHP 5.1(稳定版本) 开发wms 进销存系统源码
  • 全面解析 SOCKS5 代理和 HTTP 代理在网络安全与爬虫应用中的技术对比与应用指南
  • DevOps系列文章 之 docker 制作kafka镜像
  • iPhone 安装 iOS 17公测版(Public Beta)
  • Spingboot yaml 配置文件及数据读取
  • vue中使用axios发送请求时,后端同一个session获取不到值
  • html请求谷歌音频跨域问题(谷歌翻译接口)虚拟机ping不通google(下载谷歌音频、下载百度翻译音频)
  • 【设计模式|结构型】享元模式(Flyweight Pattern)
  • 最小覆盖子串(JS)
  • <C语言> 预处理和宏
  • 代驾公司如何进行运营分析
  • 初学HTML:采用CSS绘制一幅夏天的图
  • 经典文献阅读之--NoPe-NeRF(优化无位姿先验的神经辐射场)
  • 在docker中没有vi如何修改docker中的文件
  • 【Docker】Docker应用部署之Docekr容器安装Nginx
  • flutter开发实战-jsontodart及 生成Dart Model类
  • C++复刻:[流光按钮]+[悬浮波纹按钮]