我如何设计类似于 Pinterest 图板的图像列表？

Question

我有一张图片列表。我试图让它们的布局类似于 Pintrest 板。就像下面的示例图片一样：

然而，我能达到的唯一结果是：

这是我目前的情况：

.continut {
  margin: 0 auto;
  width: 990px;
}
.rand {
  margin: 0 5px;
}
.box-img {
  position: relative;
  float: left;
  width: 25%;
}
.box-img  img {
  border: 0;
  max-width: 100%;
}

    <div class="continut">
      <div class="rand">
        <a class="box-img"><img src="http://40.media.tumblr.com/c8e11d8c0279c6b5cb4fd6d2b7278149/tumblr_nck3r1cGTy1qe4p6do1_1280.jpg"></a>
        <a class="box-img"><img src="http://40.media.tumblr.com/37f245ed9f4f4088b0d41c743d0f70c2/tumblr_mrp0r9nsak1rn86uco1_1280.jpg"></a>
        <a class="box-img"><img src="http://40.media.tumblr.com/9233cef94eb89f94343b9d5a2a890e5c/tumblr_mt35f2lHx01qgu2wio1_1280.jpg"></a>
        <a class="box-img"><img src="http://41.media.tumblr.com/a7950321c8cb51ae537f6ac1c5dd796d/tumblr_nghriwuQoi1r05o81o1_1280.jpg"></a>
        <a class="box-img"><img src="http://40.media.tumblr.com/f4c49ca91e71de45275ec71926deda22/tumblr_nfx14oxXy01tpw2ero1_1280.jpg"></a>
        <a class="box-img"><img src="http://40.media.tumblr.com/8615093ac8f3326e3e3715e4cd289de8/tumblr_nh4472KKyJ1qllucco1_1280.jpg"></a>
        <a class="box-img"><img src="http://40.media.tumblr.com/34b7afdd5501ba317ab047560fb96306/tumblr_nb6ti3I0KM1rpouqmo1_1280.jpg"></a>
        <a class="box-img"><img src="http://41.media.tumblr.com/f2be3ed1e09785589de69142494736cd/tumblr_ngjlr9ftiB1rp1s63o1_1280.jpg"></a>
      </div>
    </div>

Answer 1

使用Javascript：

这种类型的布局可以使用名为 masonry 的 javascript 库来实现。

这是一个如何实现的例子：

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  itemSelector: '.box-img'
});

.box-img {
  width: 345px;
  width: 250px;
  margin-bottom: 20px;
  margin-left: 5px;
  float: left;
  margin-bottom: 15px;
  position: relative;
}

.box-img img {
  max-width: 100%;
}

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>


<div id="container">
 <a class="box-img">
    <img     src="http://40.media.tumblr.com/c8e11d8c0279c6b5cb4fd6d2b7278149/tumblr_nck3r1cGTy1qe4p6do1_1280.jpg">
  </a>
  
  <a class="box-img">
    <img src="http://40.media.tumblr.com/37f245ed9f4f4088b0d41c743d0f70c2/tumblr_mrp0r9nsak1rn86uco1_1280.jpg">
  </a>
  
  <a class="box-img">
    <img src="http://40.media.tumblr.com/9233cef94eb89f94343b9d5a2a890e5c/tumblr_mt35f2lHx01qgu2wio1_1280.jpg">
  </a>
  
  <a class="box-img">
    <img src="http://41.media.tumblr.com/a7950321c8cb51ae537f6ac1c5dd796d/tumblr_nghriwuQoi1r05o81o1_1280.jpg">
  </a>
  
  <a class="box-img"><img src="http://40.media.tumblr.com/f4c49ca91e71de45275ec71926deda22/tumblr_nfx14oxXy01tpw2ero1_1280.jpg">
  </a>
  
  <a class="box-img">
    <img src="http://40.media.tumblr.com/8615093ac8f3326e3e3715e4cd289de8/tumblr_nh4472KKyJ1qllucco1_1280.jpg">
  </a>
  
  <a class="box-img">
    <img src="http://40.media.tumblr.com/34b7afdd5501ba317ab047560fb96306/tumblr_nb6ti3I0KM1rpouqmo1_1280.jpg">
  </a>
  
  <a class="box-img">
    <img src="http://41.media.tumblr.com/f2be3ed1e09785589de69142494736cd/tumblr_ngjlr9ftiB1rp1s63o1_1280.jpg">
  </a>
</div>

Note: after pressing the run code button it may not look as it's intended too, this is due to the small size. Press the "full screen" button for a truer representation.

请参阅 Getting Started

上的文档

Answer 2

仅使用 CSS3 列：

此示例仅使用 CSS3 来实现砌体样式布局。

#container {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
    margin: 0 auto;
    width: 990px;
}

.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}

.box-img img {
  max-width: 100%;
}

<div id="container" class="cols">
  <a class="box-img">
    <img     src="http://40.media.tumblr.com/c8e11d8c0279c6b5cb4fd6d2b7278149/tumblr_nck3r1cGTy1qe4p6do1_1280.jpg">
  </a>
  
  <a class="box-img">
    <img src="http://40.media.tumblr.com/37f245ed9f4f4088b0d41c743d0f70c2/tumblr_mrp0r9nsak1rn86uco1_1280.jpg">
  </a>
  
  <a class="box-img">
    <img src="http://40.media.tumblr.com/9233cef94eb89f94343b9d5a2a890e5c/tumblr_mt35f2lHx01qgu2wio1_1280.jpg">
  </a>
  
  <a class="box-img">
    <img src="http://41.media.tumblr.com/a7950321c8cb51ae537f6ac1c5dd796d/tumblr_nghriwuQoi1r05o81o1_1280.jpg">
  </a>
  
  <a class="box-img"><img src="http://40.media.tumblr.com/f4c49ca91e71de45275ec71926deda22/tumblr_nfx14oxXy01tpw2ero1_1280.jpg">
  </a>
  
  <a class="box-img">
    <img src="http://40.media.tumblr.com/8615093ac8f3326e3e3715e4cd289de8/tumblr_nh4472KKyJ1qllucco1_1280.jpg">
  </a>
  
  <a class="box-img">
    <img src="http://40.media.tumblr.com/34b7afdd5501ba317ab047560fb96306/tumblr_nb6ti3I0KM1rpouqmo1_1280.jpg">
  </a>
  
  <a class="box-img">
    <img src="http://41.media.tumblr.com/f2be3ed1e09785589de69142494736cd/tumblr_ngjlr9ftiB1rp1s63o1_1280.jpg">
  </a>
</div>

我如何设计类似于 Pinterest 图板的图像列表？

How can I style a list of images similar to a Pinterest board?

html

css

php

list

使用Javascript：

仅使用 CSS3 列：