如何在多条线上显示不同高度的图像相互粘连

Question

我现在使用的是masonry.js但仍无法达到预期的效果。

使用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>

` 输出就像这样：

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

我的要求有点像下图。

Answer 1

Wookmark jquery插件将解决您的问题。它还支持响应式视图。 http://www.wookmark.com/jquery-plugin

Answer 2

如果你不仅限于CSS并且可以使用Javascript，那么Masonry插件值得一试。它对我很有用。