How to simulate a float:top in javascript

Question

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'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, Jan 17 '12 at 04:03
what is `float: top`? there are only 4 options: left, right, none, or inherit. — Sang, Jan 17 '12 at 04:09
@Sang - there is no float top, that is only a descriptor of what he would *like* to exist. — mrtsherman, Jan 17 '12 at 04:10
@DanGayle - finally found the SO question that asked this - http://stackoverflow.com/questions/7268447/how-to-stack-divs-from-top-to-bottom-in-css — mrtsherman, Jan 17 '12 at 04:16
@Geuis Not necessarily columns, in much the same way that floating left or right doesn't create rows. — Dan Gayle, Jan 17 '12 at 10:30
Who is downvoting this question? If there's a problem with the question, please post it. — Dan Gayle, Dec 28 '12 at 10:10

score 3 · Answer 1 · answered Jan 17 '12 at 06:52

3

Don't reinvent the wheel!

http://masonry.desandro.com/

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

answered Jan 17 '12 at 06:52

HandiworkNYC.com

10,914
25
92
154

I had seen jQuery Masonry before. I'll definitely check it out to see if it will do what I need. – Dan Gayle Jan 17 '12 at 10:28

score 2 · Answer 2 · answered Jul 15 '12 at 11:35

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

}

score 2 · Answer 3 · answered Jan 17 '12 at 04:15

2

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

https://developer.mozilla.org/en/CSS3_Columns

answered Jan 17 '12 at 04:15

Geuis

41,122
56
157
219

score 1 · Answer 4 · answered Jan 17 '12 at 04:34

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.net/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;
});

This looks promising. Thanks! – Dan Gayle Jan 17 '12 at 10:32 — Dan Gayle, Jan 17 '12 at 10:32

score 0 · Answer 5 · answered Jan 17 '12 at 04:14

0

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 comment and i'll see if i can help. :]

answered Jan 17 '12 at 04:14

BananaNeil

10,322
7
46
66

Can you think of a way to do this without setting the number of columns in advance? – Dan Gayle Jan 17 '12 at 10:32
What do you want to use as your signifier? you could easily set columns = total_width_of_area / width_of_each_item – BananaNeil Jan 17 '12 at 11:17
Yeah, that sounds more reasonable. The width can actually be variable in my exact situation. Fixed height though. – Dan Gayle Jan 17 '12 at 21:49

How to simulate a float:top in javascript

5 Answers5