首页 > 其他分享 >瀑布流布局

瀑布流布局

时间:2023-04-11 11:23:37浏览次数:39  
标签:columnCount const columnIndex 布局 item 瀑布 waterfall columnHeights

window.onload = function() {
  const waterfall = document.getElementById('waterfall');
  const items = waterfall.querySelectorAll('.waterfall-item');
  const columnCount = 3;
  const columnHeights = new Array(columnCount).fill(0);

  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    const columnIndex = i % columnCount;
    const columnHeight = columnHeights[columnIndex];
    item.style.left = `${columnIndex * (item.offsetWidth + 10)}px`;
    item.style.top = `${columnHeight}px`;
    columnHeights[columnIndex] += item.offsetHeight + 20;
  }

  const maxHeight = Math.max(...columnHeights);
  waterfall.style.height = `${maxHeight}px`;
};

标签:columnCount,const,columnIndex,布局,item,瀑布,waterfall,columnHeights
From: https://www.cnblogs.com/zsnhweb/p/17305635.html

相关文章

  • Android布局
    接下来,将文本转换为十进制数字。对 stringInTextField 调用 toDouble(),并将其存储在一个名为 cost 的变量中。valcost=stringInTextField.toDouble()不过,这样行不通-需要对 String 调用 toDouble()。原来 EditText 的 text 属性是 Editable,因为它表示可以......
  • 前端经典三栏布局
    浮动实现前面放置的两个div进行浮动,后面一个让其marginauto居中<style>/*浮动三栏*/.fatherdiv{width:200px;height:200px;}.left{background-color:red;float:left;......
  • WebKit网页布局实现(0):基本概念及标准篇
    作为一个广受好评的浏览器引擎,其网页布局的质量(包括速度、效率、符合标准度等)往往是其关键,那么WebKit究竟是如何布局网页上的所有元素(包括滚动条、文字、图片、按钮、下拉框等)呢?其主要数据结构及流程都包括哪些呢?其布局的基本概念及标准都有哪些呢?下面分别介绍WebKit对其实现......
  • Listview中显示不同的视图布局
    1.使用场景在重写ListView的BaseAdapter时,我们常常在getView()方法中复用convertView,以提高性能。convertView在Item为单一的同种类型布局时,能够回收并重用,但是多个Item布局类型不同时,convertView的回收和重用会出现问题。比如有些行为纯文本,有些行则是......
  • 可左右两侧挤压傍边布局的Android抽屉
    我参考了这篇文章,我将它改了一下:可动态布局的Android抽屉之基础工程中需要这样的效果,左边和右边的Panel可以打开关闭:我把左边和右边的Panel封装成2个类了。这里要特别注意,抽屉是需要“handler”的,我这里可以把任何View都看成“handler”,使用setBindView(Vie......
  • 船舶的布局问题学习
    船舶的布局问题学习​ 船舶的布局问题包括许多小的布局类问题,包括船舶机舱设备的布局问题、船舶管路的布局问题、船舶舱室内属具的布局问题和船舶舱室划分布局问题等。船舶机舱设备的布局问题​ 船舶机舱设备布局设计属于密闭有限空间多目标优化设计问题,作为船舶的心脏,机舱设备......
  • element-plus中Container 布局容器左右留白
    index.vue代码如下:<scriptlang="ts"setup></script><template><el-containerclass="layout"><el-asideclass="aside"width="200px">Aside</el-aside><el-contain......
  • Java笔记(10) GUI->布局
    这里介绍3种布局:FlowLayout流式布局BorderLayout边界布局GridLayout网格布局FlowLayout/*MyFrame定义见Java笔记9,这里添加了事件监听方法*/publicclassTestFlowLayout{publicstaticvoidmain(String[]args){MyFramemyFrame=newMyFram......
  • 移动端响应式布局
    实现响应式布局开发的步骤寻找参照的比例(例如设计稿的比例),在这个比例下给网页的字体设置一个初始值,便于计算可以设置为100px,不可以设置为12px以下的,因为浏览器最小字体为12px,如果设置为10px则会按照12px进行计算。未来我们要把设计稿中测量出来的尺寸(px)转换为REM单位去设置样式......
  • 多层级下flex布局和overflow的坑
    效果图,滚动条已经在最左边,但是左侧的内容没有显示完成简单复原结论:因为father盒子的justify-content:center,将son居中展示,从而导致son盒子显示不全。......