javascript - 如何模拟 float :top in javascript

Question

我有一大堆想要 float 的元素，但理想情况下我希望它们从上到下、从左到右堆叠。左浮动将它们从左到右、从上到下堆叠。

如何在 native 代码或 jQuery 中模拟 javascript 中的 css float:top 属性？

示例代码:

<style>
*{margin:0;padding:0;}
ul {
    height:80px;
    width:350px;
    margin:10px;
    padding:0;
    outline:1px solid;
}
li{
    float:left;
    list-style:none;
    margin:0;
    padding:3px 5px;
}
</style>
<ul>
    <li>1679</li>
    <li>1682</li>
    <li>1732</li>
    <li>1761</li>
    <li>1773</li>
    <li>1781</li>
    <li>1788</li>
    <li>1791</li>
    <li>1797</li>
    <li>1799</li>
    <li>1832</li>
    <li>1861</li>
    <li>1873</li>
    <li>1879</li>
    <li>1881</li>
    <li>1882</li>
    <li>1888</li>
    <li>1891</li>
    <li>1897</li>
    <li>1899</li>
    <li>1932</li>
    <li>1932</li>
    <li>1961</li>
    <li>1961</li>
</ul>

有一个类似的问题here ，但它似乎正在寻找更多的 CSS 解决方案，而不是基于 js 的解决方案。另外this question是布局修复的更具体实现。

Answer 1

不要重新发明轮子!

http://masonry.desandro.com/

jQuery Masonry 完全执行您所描述的操作。而且它非常容易实现。不过，您可能需要稍微改变您的标记。