根据子行的第一行计算元素宽度

Question

所以我有一个像this

这样的代码

这应该是一个响应式图像网格，对于一行的最后一个元素，类.last由jQuery添加，因此它没有margin-right。 （来自here的解决方案）

但是现在，我需要根据<section class="grid">的第一行元素的宽度为margin: 0 auto分配宽度。

我试过了：

var width = 0;
$('section.grid img').each(function() {
    width += $(this).outerWidth( true );
});
$('.grid').css('width', width);

但很明显，它并不起作用，因为它总结了所有元素，而不仅仅是第一行。此外，一行上的图像数量可根据屏幕宽度而变化。

谢谢。

Answer 1

以下是步骤：

1. 获取window的宽度img和外宽度（宽度+填充+边距）
2. 计算适合窗口的img的编号。
3. 应用计算出的宽度（img的数量，以及*宽度）

Updated fiddle

<section class="grid">的宽度可以通过parseInt(winWidth / width) * width

计算得出