J. Soukup J. Soukup - 5 months ago 10
Javascript Question

calculate element width based on first line of children

So I have a code like this

This is supposed to be a responsive grid of images and for the last element on a line, the class

.last
is added by jQuery so it has no
margin-right
. (solution from here)

But now, I need to assign width to the
<section class="grid">
based on the width of the first line of elements for
margin: 0 auto
to work.

I tried this:

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


but obviously that doesn't work as it sums all the elements, not just the first line. Also the number of images on a line is variable based on the screen width.

Thank you.

Answer

Here are the steps:

  1. Get the width of window and outerWidth(width + padding + margin) of img
  2. Calculate the no of img that can fit into the window.
  3. Apply the calculated width (no of img's that can fit * it's width )

Updated fiddle

Width for <section class="grid"> can be calculated by parseInt(winWidth / width) * width