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

我现在使用的是massy.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>

` 现在的输出是这样的：

我的要求有点像下图

---

Wookmark jquery插件将解决您的问题。它还支持响应视图。

---

如果您不局限于css，并且可以使用Javascript，那么该插件值得一试。这对我很有效

试试谢谢你，Paulie_D，我已经看过上面提到的javascript。看起来很简单，让我试试看结果。我使用的是massy.js bt，但仍然没有达到预期效果。看起来与上面的建议非常相似。masional.js必须同时尝试这两个脚本，看看哪一个给我最好的结果。