0

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

不确定我是否解释得足够好，但小提琴应该清楚我想要什么。前五个 div 的宽度发生了一些变化以确保该行被填充，但我不能让其余的行填充容器

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

http://jsfiddle.net/SG9Vx/

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

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

4

2 回答 2

2

如果我理解你想要做什么，我对代码做了一些小的改动

                    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/

于 2013-04-19T12:10:18.490 回答
0

这是我认为您要实现的目标的简化版本：

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/

于 2013-04-19T11:53:45.700 回答