am moving from column-count css to this code : Codepen
I used to have
max-width: 501px : 1 Column
min-width: 502px to max-width: 890px : 2 columns
min-width: 891px to max-width: 1200px : 3 Columns
min-width: 1201px : 4 Columns
with Max column width of 400px*
How can I adjust the codepen to match the above ? P.S. Am a bit lost with the fraction.
The reason I decided to move to this script is because the old code based on pure CSS was sorting the items in columns. URL here: Live website
i.e.
1 4 7
2 5 8
3 6 9
With grid CSS (thanks for your help) & JS, the items will appear in the correct order now.
URL here : Dev Website
i.e:
1 2 3
4 5 6
7 8 9
However Only when I load another JS to “Lazy load” the images, it will add extra height so the items making all of them of the same height. Without this “Lazy load” JS it will work great.
Yes probably a question for the JS gurus around here rather than me
At a guess I would say that your masonry and images loaded is using the data images that you are supplying as they are loaded first and using their dimensions to lay out the page resulting in everything being the same. Maybe if your data images were the correct aspect ratio for each image (and had the correct width and height attributes added) then it would work but that’s just a guess I’m afraid.
Thanks PaulOB, thanks for the link but however am lost in the explanations. Do you think I should repost this issue somewhere here but in another category ?
You should probably post a new thread but keep it in JS as this thread was concerned about the column widths but now the question is a bout lazy load and ImagesLoaded scripts working together.