CODEWITHSUNDEEP
htmlcssimage
invinciblemuffi
invinciblemuffi

Reputation: 1145

How to display images with different heights on multiple lines stick to each other

I am using masonry.js now bt still unable to get the desired effect.

Javascript:`

var container = document.querySelector('#container');
var msnry = new Masonry( container, {columnWidth: 200, itemSelector: '.item'});

`

CSS: `

html, body, div, img {padding:0; margin:0; border:0;}
.container {width:100%;}
.item {width:19.5%;display:inline-block; margin-right:-3px;}
.item img{width:100%; vertical-align:top;}

`

HTML: `

<div class="container">
<div class="item">
 <img src="http://placehold.it/350x150">
</div>
<div class="item">
 <img src="http://placehold.it/350x200">
</div>
<div class="item">
<img src="http://placehold.it/250x100">
</div>
<div class="item">
<img src="http://placehold.it/300x250">
</div>
<div class="item">
<img src="http://placehold.it/150x150">
</div>
<div class="item">
<img src="http://placehold.it/250x350">
</div>
<div class="item">
<img src="http://placehold.it/300x250">
</div>
<div class="item">
<img src="http://placehold.it/150x150">
</div>
<div class="item">
<img src="http://placehold.it/250x350">
</div>
<div class="item">
<img src="http://placehold.it/300x250">
</div>
</div>

` The output is right now like this:

https://dl.dropboxusercontent.com/u/74143916/imageplacement.png

My requirement is somewhat like this below image.

enter image description here

Upvotes: 0

Views: 123

Answers (2)

Janko
Janko

Reputation: 152

If you are not limited to css and can use Javascript, the Masonry plugin is worth a try. It has worked for me quite well.

Upvotes: 0

amol
amol

Reputation: 1555

Wookmark jquery plugin will solve your problem. It supports responsive view also. http://www.wookmark.com/jquery-plugin

Upvotes: 1

Related Questions