Question

我试图仅使用CSS创建一个带有我的图像的砌体类型布局。我跟着this guide，效果很好。

HTML：

<div class="grid">  
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
    <img src="4.jpg">
    <img src="5.jpg">
    <img src="6.jpg">
    <img src="7.jpg">
    <img src="8.jpg">
</div>

CSS：

.grid {
  line-height: 0 ;

  -webkit-column-count: 4 ;
  -webkit-column-gap:   10px ;
  -moz-column-count:    4 ;
  -moz-column-gap:      10px ;
  column-count:         4 ;
  column-gap:           10px ;

  margin: 20px;
}

.grid img {
  width: 100% ;
  height: auto ;
  margin-bottom: 10px;
}

看起来像这样：

但是，图像按此顺序显示：

1    3    5    7
2    4    6    8

我想这样：

1    2    3    4
5    6    7    8

我该如何解决这个问题？我更喜欢只有CSS的解决方案，但我也对Javascript和jQuery方法持开放态度。理想情况下，我想要一个row-count属性，但这并不存在。

Answer 1

如果您只是更改html文件中的图像顺序怎么办？

<div class="grid">  
    <img src="1.jpg">
    <img src="5.jpg">
    <img src="2.jpg">
    <img src="6.jpg">
    <img src="3.jpg">
    <img src="7.jpg">
    <img src="4.jpg">
    <img src="8.jpg">
</div>

Answer 2

或者，改变HTML中图片的顺序为@FradistaFicko建议或使用flexbox并手动设置图片的顺序，记住还要在容器上设置固定的高度和宽度。

在这里摆弄：https://jsfiddle.net/jwhwn62v/1/

.grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex 1 1;
  height: 100vw;
  width:100vw;

}

.grid img {
  width: 33.33% ;
  height: auto ;
  margin: 5px;
}

.grid img:nth-child(3n+1) {
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
}
.grid img:nth-child(3n+2) {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}
.grid img:nth-child(3n+3) {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;

}

Answer 3

在display:flex上使用flex-wrap: wrap和.grid。如果您想要连续4个，请在图片上使用width:25%;和flex: 1 0 25%。

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: auto;
}
img {
  width: 25%;
  height: auto;
  flex: 0 1 25%;
}

<div class='grid'>
  <img src='http://placehold.it/50x50/000/fff?text=1'>
  <img src='http://placehold.it/50x50/00f/fc0?text=2'>
  <img src='http://placehold.it/50x50/0e0/000?text=3'>
  <img src='http://placehold.it/50x50/cd6/d00?text=4'>
  <img src='http://placehold.it/50x50/fff/000?text=5'>
  <img src='http://placehold.it/50x50/b0b/dad?text=6'>
  <img src='http://placehold.it/50x50/0ff/000?text=7'>
  <img src='http://placehold.it/50x50/e00/fff?text=8'>
</div>

Answer 4

body {
    font: 1em/1.67 'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}

.wrapper {
    width: 95%;
    margin: 3em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;

  }
}

**请检查此链接： - http://w3bits.com/css-masonry/ **

具有列计数属性的项目顺序

4 个答案: