如何在javascript中模拟float:top

我有一个很大的项目列表，我想浮动，但理想情况下，我希望它们从上到下，从左到右堆叠。浮动左将它们从左到右、从上到下堆叠

如何在本机代码或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>

*{边距：0；填充：0；}
保险商实验室{
高度：80px；
宽度：350px；
利润率：10px；
填充：0；
外形：1px实心；
}
李{
浮动：左；
列表样式：无；
保证金：0；
填充物：3px 5px；
}

1679年
1682年
1732
1761年
1773年
1781年
1788年
1791年
1797年
1799年
1832年
1861年
1873年
1879年
1881年
1882年
1888年
1891年
1897年
1899年
1932年
1932年
1961年
1961年

---

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

因此，您可以做的事情是循环所有li，并将它们放置在您想要的位置

var origionalX = 100;
var origionalY = 200;
var columns = 10;
$("li").each(function(i){
  var x = origionalX+parseInt(i/columns)*$(this).width();
  var y = origionalY+(i%columns)*$(this).height();
  $(this).css({position : "absolute", left : x, top : y});
});

---

希望这会有所帮助。如果您想了解更具体的信息，请随时发表评论，我会看看是否能提供帮助。：]

您需要查看css3多列

---

使用javascript，您可以制作智能柱。下面是一个JSFIDLE，它将适应每个li的不同高度和宽度，以确保立柱平滑：

---

不要重新发明轮子

---

jQuery砖石结构完全符合您所描述的内容。而且它非常容易实现。不过，您可能需要稍微更改标记。

这对我来说很有效，称为“调整窗口大小/更改列表”

function layout(oList) {
    var column = 0,
        top = 0,
        bottomMargin=20,
        width = 300;

        $(oList).each(function () {
            if (top !=0 && $(this).height() + top > $(window).height()) {
                top = 0;
                column += 1;
            }
            $(this).css("top", top + "px");
            $(this).css("left", (column * width) + "px");
            top = top + $(this).height() + bottomMargin;
        }
    );

}

---

我不明白你的问题是什么。你说你想让它们从上到下，从左到右，而这正是浮动左的作用。那么问题出在哪里呢？什么是

float:top

？只有4个选项：左、右、无或继承。@Sang-没有浮顶，这只是他希望存在的描述符。@DanGayle-终于找到了提出这个问题的SO问题-

-webkit transform:rotate（90deg）

：DI以前见过jQuery。我一定会查看它，看看它是否能满足我的需要。你能想出一种方法来做到这一点，而不必预先设置列数吗？你想用什么作为你的能指？您可以轻松设置列=总面积/每个项目的宽度听起来更合理。在我的具体情况下，宽度实际上是可变的。但高度固定。这看起来很有希望。谢谢

function layout(oList) {
    var column = 0,
        top = 0,
        bottomMargin=20,
        width = 300;

        $(oList).each(function () {
            if (top !=0 && $(this).height() + top > $(window).height()) {
                top = 0;
                column += 1;
            }
            $(this).css("top", top + "px");
            $(this).css("left", (column * width) + "px");
            top = top + $(this).height() + bottomMargin;
        }
    );

}