elementax — 2012-12-30T21:09:37-05:00 — #1
Recently I've created a site with a gallery feature where images are placed throughout the entire page, and depending on the users browser size, the number of columns of images will either decrease or increase. A site with a similar feature is: pinterest.com. Basically, I added 50px margins on both the left and right side of the page so the images, header and other components of the site aren't right against the edge. The problem occurs when I begin to reduce the size of my browser. The header / footer and the rest of the content decreases in size like it should, but the images get pushed down and it ruins the layout.
For example, the site has 4 columns of images and it is aligned on both the right / left side with the header and footer contents, but as soon as the browser decreases so 4 columns no longer fit and 3 are required, there is now a big gap on the right side of the page, however the header and footer still remains 50px from the side of the browser. What I'm trying to figure out, is how would I make it similar to the site above (pinterest) so that when the page is reduced in size so only say...3 columns of images can fit, the images will be aligned in the center of the page and the header and footer will be forced to align with the images.
If you are not 100% sure on what I'm asking, take a look at pinterest and reduce your browser window size. As you probably noticed, when you reduce the size and all the current columns can fit anymore, the number of columns gets reduced, but unlike my site currently, there isn't a huge white space on the right side, the whole layout gets centered and the header / footer align with the current number of columns.
Haha, just realized I kind of wrote a lot there, I aplogize, just trying to be clear.
But basically, if you don't want to read the entire post, I'm trying to replicate how pinterest scales the image gallery. When the browser window is reduced, the number of columns of images reduce as well, but unlike my site (with a huge open space when the image gets pushed to next line), the pinterest site centers its layout and the header / footer / images all align nicely until the browser window is reduced / increased again to the next set of columns, at which point it does it again.
ralphm — 2012-12-30T22:00:23-05:00 — #2
You can do this with CSS alone by using @media rules and setting breakpoints at which columns are re-ordered and re-centered, as it were.
elementax — 2012-12-31T02:19:29-05:00 — #3
Here is an example jsfiddle for my desired result, however the creator has used CSS / html and it doesn't seem to work correctly all the time. http://jsfiddle.net/thirtydot/EDp8R/3/
Also, you can see it on http://www.pinterest.com and tumblr, and most other image related sites. Essentially, the images are evenly spaced, but are right against the end of the wrapper on both sides.
I'm assuming there is a fix in js where the spacing can be calculated? However I haven't been able to find it yet
stomme_poes — 2012-12-31T08:10:28-05:00 — #4
With CSS, you'd set a % width on your photo boxes, based on number per row. So if 5 in a row, width is something less than 20% (room for the margin).
Then initially everyone gets a margin. Let's say left margin.
With CSS you would count the items, and every nth item would NOT have the margin. So if there were 3 in a row, the first and every third after it, being the one on the left, would not have the left margin (like, in a ul, li:nth-child(3n+1).
So for example
$('#gallery li:nth-child(3n+1)').css(marginLeft, '0');
You could go further: calculate the width of the container with jQuery, divide it by the number of items per row, remove from that total however much total margin you want between elements, set that as the new element width, set the margins to your calculated margin width, and if you use percents you could have your elements growing and shrinking a bit to ensure they are always absolutely filling all the space, if your container is flexible to the viewport.
elementax — 2012-12-31T13:21:22-05:00 — #5
Ah, this method does seem a lot more effective and I was able to get it going fairly easily.
Thanks a ton for the help
stomme_poes — 2012-12-31T14:40:46-05:00 — #6
I noticed my screen isn't wide enough to see much action on Pinterest: I got a one-time drop of row-items, then a scrollbar and it remained at 4 item.