css页面布局--瀑布流布局

头像
猫多少
    阅读 8 分钟
    6

    首先我们看下，什么叫瀑布流？

    瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

    比如下面这个网站，便是瀑布流布局：

    image

    使用column-count和column-gap来实现瀑布流布局（适合简单的瀑布流排版）

    body {
  margin: 4px;
  font-family: Arial, Helvetica, sans-serif;
}

.masonry {
  column-count: 4;
  column-gap: 0;
}

.item {
  padding: 2px;
  position: relative;
  counter-increment: count;
}

.item img {
  display: block;
  width: 100%;
  height: auto;
}

.item::after {
  position: absolute;
  display: block;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  background-color: #000;
  color: #fff;
  content: counter(count);
}
    <body>
    <div class="masonry">
        <div class="item">
            <img src="https://picsum.photos/360/460?radom=1" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/520?radom=2" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/420?radom=3" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/500?radom=4" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/420?radom=5" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/460?radom=6" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/480?radom=7" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/460?radom=8" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/420?radom=9" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/500?radom=10" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/460?radom=11" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/360?radom=12" alt="">
        </div>
    </div>
</body>

    image

    不足之处：

    图片顺序是从上到下排列。如果你的网页是要按照时间倒序来展示照片，那么，我们就需要照片先从左至右排列，在换行，所以目前这种方式虽然简单，但是很多场景中不适合使用。

    flexBox方式实现瀑布流布局（不推荐）

    我们还是使用刚才的html格式，css布局方式改成flex布局。
    关于flex布局可以看我另一篇文章：Flex布局
    如果我们将flex容器的高度设置为1000px固定高度，且flex-direction设置为colunm方式，那么，当高度无法容纳所有图片时候，在flex-wrap: wrap的情况下，多余的图片变会在主轴方向换行。如下图所示：

    body {
  margin: 4px;
  font-family: Arial, Helvetica, sans-serif;
}

.masonry {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 1000px;


}

.item {
  position: relative;
  width: 25%;
  padding: 2px;
  counter-increment: count;
}

.item img {
  display: block;
  width: 100%;
  height: auto;
}

.item::after {
  position: absolute;
  display: block;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  background-color: #000;
  color: #fff;
  content: counter(count);
}

    image

    但是，这里会发现我们展示的图片排序也是自上而下的顺序排序。

    但是在flex中，我们可以使用order值来改变图片顺序，从而满足有从左至右排序的要求，代码如下：

    /**因为column为主轴，那么我们就规定第1，5，9张照片顺序优先，在主轴，也就是纵列先展示，
2，6，10张照片在第二列展示，以此类推，这里用了数学方式取了个巧**/
.item:nth-child(4n+1) {
  order: 1;
}

.item:nth-child(4n+2) {
  order: 2;
}

.item:nth-child(4n+3) {
  order: 3;
}

.item:nth-child(4n+4) {
  order: 4;
}

    image

    此时，网页便如图效果。

    不足之处：

    我们如果缩放浏览器宽度：

    image

    由于flex的容量的高度是固定的，这时候缩小容器的宽度，而容器内的图片高度又因为宽度而改变（图片宽度设置成width: 100%），这时候flex只需要分成两列，便可以容纳所有图片，而我们只是用了数学方式来取巧规定了顺序，而交叉轴宽度变小，打乱了原先布局，能那么这时候图片顺序又会被打乱。便会如上图效果。

    第三方插件实现瀑布流（推荐）

    在这里，我是比较推荐使用第三方插件来实现瀑布流布局的。

    我这里使用masonry来举例

    →→→→→masonry官网←←←←←

    按照官网介绍来看下：

    Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

    大概意思是Masonry是个第三方布局插件，让你变得像个堆砌砖墙的工匠一样，把空间里的元素放置在最佳的位置。有点难以理解吧，我们直接上代码。

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

    这里我们用CDN方式引入jquery和masony插件。

    下面是我写的css代码

    body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.grid-item {
  position: relative;
  width: 25%;
  border: 2px solid hsla(0, 0%, 0%, 0.5);
  box-sizing: border-box;
  counter-increment: count;
}


.grid-item img {
  display: block;
  height: auto;
  width: 100%;
}


.grid-item::after {
  position: absolute;
  display: block;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  background-color: #000;
  color: #fff;
  content: counter(count);
}
    <body>
  <div class="grid">
    <!-- 第一行 -->
    <div class="grid-item">
      <img src="./img/1.jpg" alt="">
    </div>
    <div class="grid-item">
      <img src="./img/2.jpg" alt="">
    </div>
    <div class=" grid-item">
      <img src="./img/3.jpg" alt="">
    </div>
    <div class="grid-item">
      <img src="./img/4.jpg" alt="">
    </div>
    <!-- 第二行 -->
    <div class="grid-item">
      <img src="./img/5.jpg" alt="">
    </div>
    <div class="grid-item">
      <img src="./img/6.jpg" alt="">
    </div>
    <div class="grid-item">
      <img src="./img/7.jpg" alt="">
    </div>
    <div class="grid-item">
      <img src="./img/8.jpg" alt="">
    </div>
    <!-- 第三行 -->
    <div class="grid-item">
      <img src="./img/9.jpg" alt="">
    </div>
    <div class="grid-item">
      <img src="./img/10.jpg" alt="">
    </div>

    <div class="grid-item ">
      <img src="./img/11.jpg" alt="">
    </div>
    <div class="grid-item">
      <img src="./img/12.jpg" alt="">
    </div>
    <div class="grid-item">
      <img src="./img/13.jpg" alt="">
    </div>
    <div class="grid-item">
      <img src="./img/14.jpg" alt="">
    </div>

  </div>
</body>

    我把每个照片都宽度设置成了25%。也就是在每行会呈现4张照片。接下来是js代码

    var $grid = $('.grid').masonry({
  itemSelector: '.grid-item', 
  percentPosition: true, //使用百分比宽度的响应式布局
  horizontalOrder: true, //对项目进行布局以保持水平的从左到右的顺序,定义了此条件，照片一般会按照从左到右顺序排列，但也不是绝对的。
  originLeft: true, //设置布局方式为从左到右，此项是默认值，可以不填写，如果你设置值为false，则会从右到左排序
  originTop: true,//设置布局方式为从上到下，此项是默认值，可以不填写，如果你设置值为false，则会从下到上排序
  transitionDuration: '0.8s',//更改位置或外观时的过渡持续时间,默认是0.4s
  resize:true, //调整窗口大小时自动调整元素大小和位置，此项不推荐关闭
  initLayout: true,//默认为true，在初始化时候启用布局，如果设置为在初始化时禁用布局，可以在初始布局之前使用方法或添加事件，执行玩自定义方法后，在使用$grid.masonry()方法来初始化
})

//如果我initLayout: false,那么在初始化布局前，会先执行此方法，然后在调用$('.grid').masonry()方法进行初始化，下面方法只是举例
$grid.masonry( 'on', 'layoutComplete', function() {
  console.log('layout is complete');
});
// 如果initLayout: true,则不需要此方法
$grid.masonry();

/** masonry的配置项一共有以下，不再多做介绍，可以自行去看英文官网。
- Recommended 
- itemSelector 
- columnWidth 
- Layout
- Element sizing 
- gutter
- horizontalOrder 
- percentPosition
- stamp 
- fitWidth
- originLeft 
- originTop
- Setup 
- containerStyle 
- transitionDuration 
- stagger 
- resize 
- initLayout
**/

    设置完毕后，得到如下图的布局展示，因为我设置了horizontalOrder: true原因，所以图片排版会尽量按照从左到右方式来布局。并且因为我设置的图片宽度为百分比，所以无论是缩小和放大元素，一行都会呈现四张图片。

    image.png

    另外，我们也可以使用固定像素宽度来设置图片，以防图片变形。我们将图片容器的宽度从25%改为200px

     .grid-item {
   position: relative;
   width: 200px;
   border: 2px solid hsla(0, 0%, 0%, 0.5);
   box-sizing: border-box;
   counter-increment: count;
}

    将js代码中的masonry配置项中的 percentPosition: true去除。这时候，我们得到的排版效果如下图，我们可以发现照片宽度被固定在200px，并且尽可能占满一行，无法占满则换行。

    image

    当我们缩小浏览器的宽度时候，照片会自适应宽度布局。如下图：
    image

    到这里，我们完美实现了瀑布流布局的展示。不过此插件要注意浏览器的兼容性，我在safari使用变没有生效，而chrome则没有问题。

    类似的插件还有isotope等，在这里不再铺开说了，masonry也有着各种各样的布局方式，感兴趣的可以去官网看。

    瀑布流前端htmlcsschrome
    猫多少
    33 声望4 粉丝
    « 上一篇
    Centos7内网环境搭建yum源

    引用和评论

    推荐阅读
    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.8k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.5k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    0 条评论
    得票最新