jQuery add row number as class on the divs on current row

Question

I need to make jquery fill all the rows in a layout as the first row in the fiddle

not sure if I explained well enough but the fiddle should clear out what I want. first five divs have width changed a bit to make sure the row is filled, but I can't make the rest of rows fill the container

basically I want to justify all the divs by increasing their widths

http://jsfiddle.net/SG9Vx/

so far I have this function, modified from here: jQuery Find number of items per row in floated li's:

var lisInRow = 0;

$('#posts div').each(function() {
if($(this).prev().length > 0) {
    if($(this).position().top != $(this).prev().position().top) return false;
    lisInRow++;
    $(this).addClass("row1");   
}
else {
       lisInRow++;  
       $(this).addClass("row1");    
   }
});

var itemNumber = $(".row1").length
var widthRow = 0;
$('.row1').each(function() {
    widthRow += $(this).outerWidth( true );
});
var widthContainer = $("#posts").width();
var remaining = widthContainer - widthRow;
leftMargin = Math.floor(remaining / itemNumber);
$(".row1").each(function(){ 
    var addedwidth = $(this).width() + leftMargin;
    $(this).width(addedwidth);
});

What I do for the first row is calculate what's left of the container, divide it by number of items on the row, and add the result to the width of each item on the row.

coz i'm using Isotope to build the layout, and table won't fix it — Daniel Ursu, Apr 19 '13 at 11:29

score 2 · Accepted Answer · answered Apr 19 '13 at 12:10

If I understood what you're trying to do, I made some small changes to the code

                    var lisInRow = 0;
                    var lisInRow2 = 0;
                    var row =  0;
                    $('div div').each(function() {
                        if($(this).prev().length > 0) {
                            if($(this).position().top != $(this).prev().position().top) row++;
                            lisInRow++;
                            $(this).addClass("row"+row);    
                            //console.log($(this).prev().length)
                        }
                        else {
                            lisInRow++;  
                            $(this).addClass("row0");   
                        }
                    });
for(var i=0;i<=row;i++){
                    var itemNumber = $(".row"+i).length
                    console.log(row);
                    var widthRow = 0;
                    $(".row"+i).each(function() {
                        widthRow += $(this).outerWidth( true );
                    });
                    var widthContainer = $("#posts").width();
                    var remaining = widthContainer - widthRow;
                    leftMargin = Math.floor(remaining / itemNumber);
                    $(".row"+i).each(function(){ 
                        var addedwidth = $(this).width() + leftMargin;
                        $(this).width(addedwidth);
                        $(this).find("img").width(addedwidth);
                    }); 
}

Here you have it:

http://jsfiddle.net/SG9Vx/3/

niiice!!! now all I have to do is make it work with Isotope. Will accept your answer and if I can't make will post another question. Thank you! — Daniel Ursu, Apr 19 '13 at 12:16

score 0 · Answer 2 · answered Apr 19 '13 at 11:53

0

Here's a simplified version of what I think you're trying to achieve:

var lisInRow = 0;
$('div div').each(function() {
  if($(this).prev().length > 0) {
    if($(this).position().top != $(this).prev().position().top){
      lisInRow++;
    }                   
   $(this).addClass("row" + lisInRow);  
 }
});

Fiddle: http://jsfiddle.net/568mP/

answered Apr 19 '13 at 11:53

graphicdivine

10,937
7
33
59

looks nice! now I have to get out of each and do the math for each row, something still doesn't work.. now I have the last row filled: http://jsfiddle.net/3yury/1/ – Daniel Ursu Apr 19 '13 at 12:02

jQuery add row number as class on the divs on current row

2 Answers2