So I'm stumped with a JS problem: I need to take a list of images, wrap each in a li (don't ask, it's just one of the those things), and place a set number into ul's. The problem is the "set number".
The idea is that the number of ul's created will be based on the container width. So if we have a div that's 200px, and I have 6 images, I have to divide those into rows of ul's.
container div width is 200px
images 1-2 = 186px
wrap images 1&2 in ul
images 3-5 = 199px
wrap images 3-5 in ul
image 6 = 40px
wrap image 6 in ul
I've tried doing for loops with if/else if in them, but because I've based them against the 200px (something like if total width < 200px, total width += width of this span, and push this into temp array; else if total width > 200px, push array into html, empty array, start over), the issue I have is that I never catch the last line of images, since they will always be under 200px, which means the "else if" no longer runs.
Any ideas guys? I'm totally stumped.
(Or if anyone has an alternative way of doing this without using arrays, it would be great - no CSS suggestions please. This needs to be strictly JS).