适当浮动不同高度的潜水器

Question

我无法正确显示列表项！

我希望它是这样的：https://i.stack.imgur.com/RKv5O.jpg

现在看起来是这样的：https://i.stack.imgur.com/ssJIs.jpg

我知道这个有一个"名字"，但我找不到，所以我开始问这个问题，请帮忙！

HTML:

    <li>
    <img src="http://vinebox.co/proxy/http___v.cdn.vine.co/r/thumbs/11F2FCA00E1016207155612794880_19600f95230.4.4.10195081721815085090.mp4_dzi7hfWQ0FtLGkGihe1TIN.TpZVQEoRCKTMZ_HkMtwN93uiELhX20LOXy4v7.46M.jpg">
       <a class="user-link" href="#">ChrisChin<span class="date">8h</span></a>
       <span>
            Come say hi to us on Omegle!
       </span>
    </li>

CSS：

.vines ul {}
.vines ul li { 
background:#FFF; 
width:180px; 
display: inline-block; 
padding:10px; -webkit-box-shadow:  1px 1px 2px 0px #dcdcdc; 
border-radius: 3px;        
box-shadow:  1px 1px 2px 0px #dcdcdc; margin:15px; 
}

Answer 1

您需要设置vertical-align:top，但这不是您想要的。您的模板是行设计的，但您想要的是列设计。所以你需要更改你的html。

Answer 2

您需要一些JavaScript来构建该结构，而不必关心每个元素的高度。查看砌体(http://masonry.desandro.com/)，我认为它会做得很好。它甚至不需要jQuery。