纯css 和 js瀑布流布局（转）

作者: 王远清orz | 来源:发表于2019-05-16 15:17 被阅读337次

纯 css 写瀑布流

1.multi-columns 方式：

通过 Multi-columns 相关的属性 column-count、column-gap 配合 break-inside 来实现瀑布流布局。

html代码

<div class="masonry"> 
            <div class="item"> 
                <div class="item_content content-lar"> 1
                </div> 
            </div> 
            <div class="item"> 
                <div class="item_content content-sma"> 2
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-mid"> 3
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-sma"> 4
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-mid"> 5
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-lar"> 6
                </div> 
            </div> 
            <div class="item"> 
                <div class="item_content content-sma"> 7
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-lar"> 8
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-lar"> 9
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-sma"> 10
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-mid"> 11
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-mid"> 12
                </div> 
            </div>
            <!-- more items --> 
        </div>

.masonry 是瀑布流容器，里面放置了列表 item，在 .masonry 中设置 column-count（列数）和 column-gap（列间距）

item 中设置 break-inside:avoid，这是为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局。

在 css 中设置包裹 masonry 和 item 的属性样式：

.masonry { 
                -moz-column-count:3; /* Firefox */
                -webkit-column-count:3; /* Safari 和 Chrome */
                column-count:3;
                -moz-column-gap: 2em;
                -webkit-column-gap: 2em;
                column-gap: 2em;
                width: 80%;
                margin:2em auto;
            }
            .item { 
                padding: 2em;
                margin-bottom: 2em;
                -moz-page-break-inside: avoid;
                -webkit-column-break-inside: avoid;
                break-inside: avoid;
                background: #f60;
            }

当然为了布局具有响应式效果，可以借助媒体查询属性，在不同屏幕大小的条件下设置瀑布流容器 masonry 的 column-count 来自适应改变列数：

@media screen and (max-width: 800px) { 
                .masonry { 
                    column-count: 2; // two columns on larger phones 
                } 
            } 
            @media screen and (max-width: 500px) { 
                .masonry { 
                    column-count: 1; // two columns on larger phones 
                } 
            }

那么所产生的效果是：

image.png

也是根据屏幕大小自适应改变列数

2.flexbox 方式：

html 的结构依旧和上面的 Multi-columns 展示的一样。只是在 .masonry 容器中使用的 CSS 不一样：

在 .masonry 中是通过采用 flex-flow 来控制列，并且允许它换行。

这里关键是容器的高度，我这里要显式的设置 height 属性，当然除了设置 px 值，还可以设置100vh，让 .masonry 容器的高度和浏览器视窗高度一样。

记住，这里height可以设置成任何高度值（采用任何的单位），但不能不显式的设置，如果没有显式的设置，容器就无法包裹住项目列表。

.masonry { 
                height: 800px;
                display: flex; 
                flex-flow: column wrap;
                width: 80%;
                margin:2em auto;
            }

对于 .item，可以不再使用 break-inside:avoid，但其它属性可以是一样。

同样的，响应式设置，使用 Flexbox 实现响应式布局比多列布局 Multi-columns 要来得容易，他天生就具备这方面的能力，只不过我们这里需要对容器的高度做相关的处理。

前面也提到过了，如果不给 .masonry 容器显式设置高度是无法包裹项目列表的，那么这里响应式设计中就需要在不同的媒体查询条件下设置不同的高度值：

@media screen and (max-width: 1100px) { 
                .masonry { 
                    height: 800px; 
                } 
            }
            @media screen and (max-width: 800px) {
                .masonry { 
                    height: 1100px; 
                } 
            } 
            @media screen and (max-width: 600px) { 
                .masonry { 
                    height: 1300px; 
                } 
            } 
            @media screen and (max-width: 460px) { 
                .masonry { 
                    height: 1600px;
                } 
            }

那么所产生的效果是：

image.png

也是根据屏幕大小自适应改变列数。

看到这里，我们可以发现，使用纯 css 写瀑布流，每一块 item 都是从上往下排列，不能做到从左往右排列

image.png

这样子若是动态加载图片的瀑布流，体验就会很不好

我们想要的是这样：

image.png

这样做只能通过 js 来写瀑布流

js 写瀑布流：

这里我直接把自己做的项目拿过来了，做了适当修改

<div class="layui-tab-content" style="padding:0px;">

      <!-- 评论 -->
      <div class="layui-tab-item layui-show">
        <div class="comment-list flex" style="padding-top:10px;padding-bottom:20px;background:#e7e7e7;">
            <ul>
              <li>
                <a href="/detail_c?id=13634">
                  <div class="pic"><img src="./images/8.jpg"></div>
                  <div class="txt">
                    <div class="title">我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</div>
                    <div class="site flex">
                      <div class="headPic">
                        <img src="./images/1.jpg" alt="" width="24" height="24">
                      </div>
                      <div class="info">
                        <div class="name">我是姓名我是姓名</div>
                        <div class="date flex">
                          <div>5月12</div>
                          <div><span class="iconfont">
                              <!-- 找个眼睛的icon --></span>12次</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>


              </li>

              <li>
                <a href="/detail_c?id=13634">
                  <div class="pic"><img src="./images/5.jpg"></div>
                  <div class="txt">
                    <div class="title">我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</div>
                    <div class="site flex">
                      <div class="headPic">
                        <img src="./images/1.jpg" alt="" width="24" height="24">
                      </div>
                      <div class="info">
                        <div class="name">我是姓名我是姓名</div>
                        <div class="date flex">
                          <div>5月12</div>
                          <div><span class="iconfont">
                              <!-- 找个眼睛的icon --></span>12次</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>


              </li>

              <li>
                <a href="/detail_c?id=13634">
                  <div class="pic"><img src="./images/7.jpg"></div>
                  <div class="txt">
                    <div class="title">我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</div>
                    <div class="site flex">
                      <div class="headPic">
                        <img src="./images/1.jpg" alt="" width="24" height="24">
                      </div>
                      <div class="info">
                        <div class="name">我是姓名我是姓名</div>
                        <div class="date flex">
                          <div>5月12</div>
                          <div><span class="iconfont">
                              <!-- 找个眼睛的icon --></span>12次</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>


              </li>
              <li>
                <a href="/detail_c?id=13634">
                  <div class="pic"><img src="./images/6.jpg"></div>
                  <div class="txt">
                    <div class="title">我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</div>
                    <div class="site flex">
                      <div class="headPic">
                        <img src="./images/1.jpg" alt="" width="24" height="24">
                      </div>
                      <div class="info">
                        <div class="name">我是姓名我是姓名</div>
                        <div class="date flex">
                          <div>5月12</div>
                          <div><span class="iconfont">
                              <!-- 找个眼睛的icon --></span>12次</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>


              </li>
              <li>
                <a href="/detail_c?id=13634">
                  <div class="pic"><img src="./images/4.jpg"></div>
                  <div class="txt">
                    <div class="title">我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</div>
                    <div class="site flex">
                      <div class="headPic">
                        <img src="./images/1.jpg" alt="" width="24" height="24">
                      </div>
                      <div class="info">
                        <div class="name">我是姓名我是姓名</div>
                        <div class="date flex">
                          <div>5月12</div>
                          <div><span class="iconfont">
                              <!-- 找个眼睛的icon --></span>12次</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>


              </li>
              <li>
                <a href="/detail_c?id=13634">
                  <div class="pic"><img src="./images/5.jpg"></div>
                  <div class="txt">
                    <div class="title">我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</div>
                    <div class="site flex">
                      <div class="headPic">
                        <img src="./images/1.jpg" alt="" width="24" height="24">
                      </div>
                      <div class="info">
                        <div class="name">我是姓名我是姓名</div>
                        <div class="date flex">
                          <div>5月12</div>
                          <div><span class="iconfont">
                              <!-- 找个眼睛的icon --></span>12次</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>
              
              
              </li>
              <li>
                <a href="/detail_c?id=13634">
                  <div class="pic"><img src="./images/3.jpg"></div>
                  <div class="txt">
                    <div class="title">我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</div>
                    <div class="site flex">
                      <div class="headPic">
                        <img src="./images/1.jpg" alt="" width="24" height="24">
                      </div>
                      <div class="info">
                        <div class="name">我是姓名我是姓名</div>
                        <div class="date flex">
                          <div>5月12</div>
                          <div><span class="iconfont">
                              <!-- 找个眼睛的icon --></span>12次</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>
              
              
              </li>
            </ul>
        <div style="text-align:center;"><a style="color:#fa923a;font-weight: bold;"
            href="/channel/assemble">【查看更多拼团】</a>
        </div>
      </div>
      </div>
    </div>

css 内容：

.comment-list {
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 20px;
  background: #e7e7e7;
}
.comment-list ul {
  padding: 0 10px 10px;
  width: 100%;
  position: relative;
}
.comment-list ul li {
  background: #fff;
  border-radius: 5px;
  padding: 8px;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2);
  z-index: 10;
  transition: 0.25s;
  overflow: hidden;
  position: absolute;
}

.comment-list ul li .pic {
  margin-bottom: 10px;
}
.comment-list ul li .pic > img {
  width: 100%;
  height: auto;
}
.comment-list ul li .title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
}
.comment-list ul li .headPic > img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 5px;
}
.comment-list ul li .info {
  font-size: 9px;
  line-height: 1.5;
  flex-grow: 1;
  color: #666;
}
.comment-list ul li .info .date {
  flex-wrap: nowrap;
  justify-content: space-between;
}

js 瀑布流实现方式：

css 的绝对定位方式：根据每张图片的位置设置 top 和 left 值：

//瀑布流效果
  //这里有一个坑（已经修复）：
  //因为是动态加载远程图片，在未加载完全无法获取图片宽高
  //未加载完全就无法设定每一个item(包裹图片)的top。

  //item的top值：第一行：top为0
  //            其他行：必须算出图片宽度在item宽度的缩小比例，与获取的图片高度相乘，从而获得item的高度
  //                   就可以设置每张图片在瀑布流中每块item的top值（每一行中最小的item高度，数组查找）
  //item的left值：第一行：按照每块item的宽度值*块数
  //             其他行：与自身上面一块的left值相等
  function waterFall() {
    // 1- 确定图片的宽度 - 滚动条宽度
    pageWidth = $(".comment-list ul").width();//父盒子宽度
    var columns = 2; //2列
    var rowSpaces = 10; //每列的间隙
    var colSpaces = 10; //每行的间隙
    var itemWidth = parseInt((pageWidth - rowSpaces) / columns); //得到item的宽度
    $(".comment-list ul li").innerWidth(itemWidth); //设置到item的宽度
    
    var arr = [];

    $(".comment-list ul li").each(function (i) {
      var height = $(this).outerHeight();

      var width = $(this).outerWidth();

      var bi = itemWidth / width; //获取缩小的比值
      var boxheight = parseInt(height * bi) + colSpaces; //图片的高度*比值 = item的高度。boxheight是下个item的top值
      if (i < columns) {
        // 2- 确定第一行
        $(this).css({
          top: 0,
          left: (itemWidth) * i + rowSpaces*(i+1)
        });
        arr.push(boxheight);

      } else {
        // 其他行
        // 3- 找到数组中最小高度  和 它的索引
        var minHeight = arr[0];
        var index = 0;
        for (var j = 0; j < arr.length; j++) {
          if (minHeight > arr[j]) {
            minHeight = arr[j];
            index = j;
          }
        }
        // 4- 设置下一行的第一个盒子位置
        // top值就是最小列的高度 
        $(this).css({
          top: arr[index],
          left: $(".comment-list ul li").eq(index).css("left")
        });

        // 5- 修改最小列的高度 
        // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
        arr[index] = arr[index] + boxheight;
       }
        $('.comment-list ul').css('minHeight', Math.max.apply(null, arr)); 
    });
  }


  //clientWidth 处理兼容性
  function getClient() {
    return {
      width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
      height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
  }



  // 页面尺寸改变时实时触发
  window.onresize = function () {
    //重新定义瀑布流
    waterFall();
  };



  //初始化
  window.onload = function () {

    //实现瀑布流
    waterFall();

  }

效果图是：

111.png

这实现了横向排列的瀑布流效果

参考：https://www.cnblogs.com/ainyi/p/8766281.html

注意事项：原文可以实现效果，但是实际项目中，元素会有内边距，外边距，这样会影响布局，这里我做了一点点小改动。还有一点，设置到item的宽度,这里需要用innerWidth()，li元素可能是有内边距的，注意innerWidth()赋值需要引入JQ文件版本在1.8以上

纯css 和 js瀑布流布局（转）

1.multi-columns 方式：

2.flexbox 方式：

js 写瀑布流：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

个人收藏

前端

学习