js瀑布流布局

最新推荐文章于 2023-12-26 14:59:48 发布

薛文诚

最新推荐文章于 2023-12-26 14:59:48 发布

阅读量286

点赞数 1

文章标签： css html javascript

本文链接：https://blog.csdn.net/dongbangjun007/article/details/120491871

版权

瀑布流很常见，但是我也是最近才开始研究，一直以为它很难，但是搞清原理就变得很简单！

原理就是: 绝对定位+top+left，获取 left 和 top 值是关键。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>html瀑布式布局</title>
</head>
<style>
  body,
  div,
  dl,
  dt,
  dd,
  ul,
  ol,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  pre,
  code,
  form,
  fieldset,
  legend,
  input,
  button,
  textarea,
  p,
  blockquote,
  th,
  td {
    margin: 0;
    padding: 0;
  }

  .waterfall {
    position: relative;
  }

  .item {
    position: absolute;
    box-sizing: border-box;
    padding: 10px;
  }

  .item-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: auto;
    font-size: 20px;
    color: #686868;
    box-sizing: border-box;
    border: 1px solid #ccc;
  }
</style>

<body>
  <div class="waterfall">
    <div class="item">
      <div class="item-content">
        1.一月，春寒料峭。冬天虽然凛冽，却还是极其美丽的，冬韵渲染过后添了许多诗意，让冬日不再寂寞。
      </div>
    </div>
    <div class="item">
      <div class="item-content">
        2.二月，春回大地，万物复苏，春暖花开，一派生机勃勃的景象，点点春意来。
      </div>
    </div>
    <div class="item">
      <div class="item-content">
        3.三月的阳光温情流泻，轻盈的曼舞水袖。一笑是姹紫嫣红，一颦即是细雨霏霏。
      </div>
    </div>
    <div class="item">
      <div class="item-content">
        4.如果说五颜六色是四月份的代表色，那么四月份的东溪便是在这五颜六色中又增加了一抹绿，沁人心脾。
      </div>
    </div>
    <div class="item">
      <div class="item-content">
        5.五月的风，清爽宜人；五月的雨，浓烈清新；五月的芬芳，沁人心脾，无论是慢慢舒展的，还是缓缓流淌的；无论是悄无声息的，还是莺莺絮语的，都用“美好”定义。
      </div>
    </div>
    <div class="item">
      <div class="item-content">
        6.初夏来临，郁郁葱葱的六月，万物灵动舒展，到处都是青绿色彩，垂柳、茶山，渐渐浓到苍翠欲滴......
      </div>
    </div>
    <div class="item">
      <div class="item-content">
        7.走进生机盎然的七月，走进滚烫的诗行，倾听柳荫深处抑扬顿挫的蝉鸣，挟裹着不安分的飞翔。此时不妨，体验一场静心之旅。
      </div>
    </div>
    <div class="item">
      <div class="item-content">
        8.八月的风，已经不那么的轻柔，拂在脸上，激越了灵魂深处的向往。一起尽缱绻，说风流，共唏嘘。
      </div>
    </div>
    <div class="item">
      <div class="item-content">
        9.九月，秋高气爽的季节，早晚的丝丝凉意，变得更加清爽惬意。
      </div>
    </div>
  </div>

</body>

<script>
  function changePosition() {
    let dom = document.getElementsByClassName('item');
    //列值
    let column = 3;
    //窗口可视宽度
    let width = getBodyWidth();
    //获取元素高度，用于下级元素top值
    let heightTopArray = [];

    for (let i = 0; i < dom.length; i++) {

      //设置元素宽度
      dom[i].style.width = width / column + 'px';

      /***设置top值**/
      /***设置left值**/
      if (i < column) {
        //第一行
        dom[i].style.top = '0px';
        dom[i].style.left = getWidth(dom[i].style.width) * i + 'px';
        heightTopArray.push(dom[i].clientHeight);
      } else {
        //其他行
        //余数==》横向索引
        let mod = i % column;
        
        dom[i].style.top = heightTopArray[mod] + 'px';
        heightTopArray[mod] = heightTopArray[mod] + dom[i].clientHeight;

        dom[i].style.left = getWidth(dom[i].style.width) * mod + 'px';
      }

    }
  }
  function getBodyWidth() {
    return document.body.clientWidth || document.body.offsetWidth || document.body.scrollWidth;
  }
  function getWidth(e) {
    return e.split('px')[0];
  }
  window.onload = () => {
    changePosition();
  }
  window.onresize = () => {
    changePosition();
  }

</script>

</html>

薛文诚

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js瀑布流布局

瀑布流很常见，但是我也是最近才开始研究，一直以为它很难，但是搞清原理就变得很简单！原理就是: 绝对定位+top+left，获取left和top值是关键。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi...
复制链接

扫一扫