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

纯 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以上

最后编辑于：2019.06.22 17:07:19

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,445评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,889评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,047评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,760评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,745评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,638评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,011评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,669评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,923评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,655评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,740评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,406评论 4赞 320
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,995评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,961评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,197评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,023评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,483评论 2赞 342

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

1.multi-columns 方式：

2.flexbox 方式：

js 写瀑布流：

推荐阅读更多精彩内容