Question

我需要让jquery将布局中的所有行填充为小提琴中的第一行

不确定我是否解释得很好但是小提琴应该清楚我想要的东西。前五个div的宽度改变了一点，以确保行被填充，但我不能让其余的行填充容器

基本上我想通过增加宽度来证明所有div的合理性

到目前为止，我有这个功能，从这里修改：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);
});

我对第一行的操作是计算容器的剩余部分，将其除以行上的项目数，然后将结果添加到行上每个项目的宽度。

Answer 1

如果我理解你要做的事情，我对代码进行了一些小改动

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

在这里你有：

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

Answer 2

以下是我认为你想要实现的简化版本：

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

小提琴：http://jsfiddle.net/568mP/

jQuery在当前行的div上添加行号作为类

2 个答案: