前端-css-js，瀑布流

tl110110tl

已于 2022-06-27 21:51:44 修改

阅读量2k

点赞数

分类专栏：前端文章标签： css javascript

于 2022-04-09 21:31:41 首次发布

本文链接：https://blog.csdn.net/tl110110tl/article/details/124068442

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

不能用float实现，因为这玩意的最终效果是这样的。

瀑布流是等宽不等高的布局，并让最终底边看上去比较齐。

实现思路是

①算出浏览器的宽度，根据宽度算出一共要排多少列

②循环所有要布局的div。每次获取高度最低的列，将此div放置此列（绝对定位，top，left即可）。更新这列的高度。

需要注意的是，如果是动态加载的div元素，需要延时布局div，要不获取不到div。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    img { vertical-align: top;}
    .item {
      position: absolute;
      width: 270px;
      top:0;
      left:0;
    }
    .item img {
      width: 100%;
    }
  </style>
  <script type="text/javascript" >

    onload  = function() {
      var arr = [];
      var allwidth = client().width;
      var column = Math.floor( allwidth /300 );

      initdiv(resizediv);

      //页面大小发生变化时，重新定位div
      onresize = function(){
        resizediv();
      }

      function  initdiv (fn){
        var body = document.getElementsByTagName("body")[0];
        for (var i = 0; i < 30; i++) {
          var div = document.createElement("div");
          div.className = "item";
          div.innerHTML = "<img src=\"images/010_r1_c" + (i % 9 + 1) + ".jpg\" alt=\"\">";
          body.appendChild(div);
        }
        if(fn){
          //因为div们都是用方法后加上去的，所以有延迟
          setTimeout(function(){ fn(); },500);
        }
      }

      //当屏幕尺寸重新调整时执行这个方法
      function resizediv(){
        allwidth = client().width;
        column = Math.floor( allwidth /300 );
        arr = [];
        for (var i = 0 ; i <column ; i++){
          arr.push(0);
        }
        var alldiv = document.getElementsByClassName("item");
        for (var one=0;one< alldiv.length ;one++){
          var nowheight = getmin();
          console.log()
          alldiv[one].style.top = arr[nowheight] + 10 + "px";
          alldiv[one].style.left = nowheight * 300 +"px";
          arr[nowheight] = arr[nowheight] + 10 + alldiv[one].offsetHeight;
        }
      }
      // 获取当前最小列的下标index
      function getmin(){
        var minheight = 0;
        for (var h in arr){
          if(arr[h] < arr[minheight]){
            minheight = h;
          }
        }
        return minheight;
      }
      function client (){
        if(window.innerWidth!=null){
          return {
            width:window.innerWidth,
            height:window.innerHeight
          }
        }
        if(document.compatMode=="CSS1Compat"){
          return {
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
          }
        }
        return {
          width:document.body.clientWidth,
          height:document.body.clientHeight
        }
      }
    }
  </script>
</head>
<body>
</body>
</html>