javascript 瀑布流图片计算 如何实现计算

Question

有一组图片，图片长宽完全没有规律，但是想实现瀑布流墙，可以自适应页面的宽度3列或4列布局。

<div class="col-sm-8">
<a href="#" class="thumbnail">
    <img src="http://www.wanjufenlei.com/uploads/img/2015/08/27/3040_150827115409_20.jpg" alt="">
</a>
<a href="#" class="thumbnail">
    <img src="http://www.wanjufenlei.com/uploads/img/2015/08/27/3040_150827114856_26.jpg" alt="">
</a>
<a href="#" class="thumbnail">
    <img src="http://www.wanjufenlei.com/uploads/img/2015/08/25/3039_150825103905_29.jpg" alt="">
</a>
<a href="#" class="thumbnail">
    <img src="http://www.wanjufenlei.com/uploads/img/2015/08/11/3035_150811092955_43.jpg" alt="">
</a>
<a href="#" class="thumbnail">
    <img src="http://www.wanjufenlei.com/uploads/img/2015/08/11/3035_150811092914_68.jpg" alt="">
</a>
<a href="#" class="thumbnail">
    <img src="http://www.wanjufenlei.com/uploads/img/2015/08/11/3034_150811084827_93.jpg" alt="">
</a>
<a href="#" class="thumbnail">
    <img src="http://www.wanjufenlei.com/uploads/img/2015/08/11/3034_150811084746_28.jpg" alt="">
</a>
<a href="#" class="thumbnail">
    <img src="http://www.wanjufenlei.com/uploads/img/2015/08/11/3034_150811084657_30.jpg" alt="">
</a>
<a href="#" class="thumbnail">
    <img src="http://www.wanjufenlei.com/uploads/img/2015/08/11/3034_150811084632_92.jpg" alt="">
</a>
<a href="#" class="thumbnail">
    <img src="http://www.wanjufenlei.com/uploads/img/2015/08/11/3034_150811084609_87.jpg" alt="">
</a>
    </div>

Answer 1

你可以使用瀑布流组件 Masonry

如果你想自己写瀑布流，度娘一搜一大堆，随便列几个给你参考下

• 原生javascript实现瀑布流的原理解析

• javascript 简单的瀑布流

• Javascript 瀑布流实现的两种方式：固定列数的浮动布局与绝对定位自适应宽度

• 自适应瀑布流(原生JavaScript版本)

Answer 2

lz主要就是想问长宽怎么办对吧

假如你可以确定宽度，那么直接在img标签里面写宽度，或者用css也一样，会自动调整高度
加入你不能确定宽度，在添加到页面之前先用js的Image对象加载，加载完之后算长宽然后再添加到页面上