I have a large list of items that I want floated, but ideally I want them to stack top to bottom, left to right. Floating left stacks them left to right, top to bottom.

How can I simulate a css float:top attribute in javascript in either native code or jQuery?

Example code:

<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>

There is a similar question here, but it seems to be looking for more of a CSS solution rather than a js based solution. Also this question is a more specific implementation of a layout fix.

I have a large list of items that I want floated, but ideally I want them to stack top to bottom, left to right. Floating left stacks them left to right, top to bottom.

How can I simulate a css float:top attribute in javascript in either native code or jQuery?

Example code:

<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>

There is a similar question here, but it seems to be looking for more of a CSS solution rather than a js based solution. Also this question is a more specific implementation of a layout fix.

• javascript
• jquery
• css

• I'm confused about what your question is. You say you want them top to bottom, left to right and that's exactly what floating left will do. So what's the problem? – Geuis Commented Jan 17, 2012 at 4:03
• what is float: top? there are only 4 options: left, right, none, or inherit. – Ron Commented Jan 17, 2012 at 4:09
• @Sang - there is no float top, that is only a descriptor of what he would like to exist. – mrtsherman Commented Jan 17, 2012 at 4:10
• 1 @DanGayle - finally found the SO question that asked this - stackoverflow./questions/7268447/… – mrtsherman Commented Jan 17, 2012 at 4:16
• 1 -webkit-transform:rotate(90deg) :D – nickf Commented Jan 17, 2012 at 6:54

5 Answers 5

Don't reinvent the wheel!

http://masonry.desandro./

jQuery Masonry does exactly what you're describing. And it's super easy to implement. You may have to alter your markup slightly, though.

You need to look into css3 multi columns. http://caniuse./#search=column

https://developer.mozilla/en/CSS3_Columns

This works well for me, called on window resize/change of list

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;
        }
    );

}

Using javascript you can make smart columms. Here's a jsfiddle that will adapt to different heights and widths of each li ensuring smooth columns: http://jsfiddle/rgthree/hAeQ2/

var list, currentColLeft, currentColTop, nextColWidth;
currentColLeft = currentColTop = nextColWidth = 0;
list = $('ul#list');
$('ul > li').each(function(i, el){
    var h, w;
    h = $(el).outerHeight();
    w = $(el).outerWidth();
    if(currentColLeft + w > nextColWidth){
        nextColWidth = currentColLeft + w;
    }
    if(currentColTop + h > list.innerHeight()){
        currentColTop = 0;
        currentColLeft = nextColWidth;
        nextColWidth = 0;
    }
    $(el).css({'float':'none','position':'absolute','top':currentColTop,'left':currentColLeft});
    currentColTop += h;
});

So, something you can do is loop over all of the li's and position them where you want them..

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});
});

Hopefully that will help a little bit. If you're wanting something more specific, feel free to ment and i'll see if i can help. :]