CODEWITHSUNDEEP
phphtmlcsslist
Gab
Gab

Reputation: 69

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

I have a list of images. I'm trying to get them to layout similar to a Pintrest board. Like in this example image below: enter image description here

However the only result I'm able to achieve is this:

enter image description here

Here is what I have so far:

.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>

Upvotes: 2

Views: 693

Answers (2)

Kirill Fuchs
Kirill Fuchs

Reputation: 13696

Using Javascript:

This type of layout can be achieved using a javascript library called masonry.

Here is an example of how it is implemented:

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.

See the documentation on Getting Started

Upvotes: 3

Kirill Fuchs
Kirill Fuchs

Reputation: 13696

Using Only CSS3 Columns:

This example uses only CSS3 to achieve a masonry style layout.

#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>

Upvotes: 3

Related Questions