CODEWITHSUNDEEP
layoutstylespinterest
user1000665
user1000665

Reputation: 41

How do I layout photos like on Pinterest

I created a website where users can upload photos, and users can comment on the photos. The photos are shown about 12 or so on the main page of my site ordered by desc date.

However I've tried every type of display style option to get it so that if lets say the first image on the page is very tall, that the 2nd row of images aren't all pushed down. I understand the first image of the 2nd row would obviously have to appear below the tall first image of the 1st row, but the others shouldn't also have to be pushed down. Even if the image isn't tall, if there are comments on the first image of the first row, then the entire 2nd row will start under the 1st photo of the 1st row.

When I look at the website Pinterest, it appears they have this figured out and there is no unnecessary wasted space from one photo result being too tall. The others in other rows seem to use all space which is what I would like to achieve.

Currently I am using display:inner-table but it doesn't really achieve what I want although it works slightly better than some other options which sometimes produce blank skipped spaces in the results. Is the only way to achieve this through using a table with 4 columns and pre-populating those columns before printing to the page?

Pardon my stupidity. Thanks for any assistance!

Upvotes: 3

Views: 1152

Answers (1)

JP Hellemons
JP Hellemons

Reputation: 6057

Mkae your life easier with the use of jQuery for your issue. Check out this jQuery plugins:

read about the difference between them here: Differences between Isotope and Masonry jQuery plugins

Upvotes: 1

Related Questions