4 Replies Latest reply: Feb 9, 2013 11:01 AM by Nancy O. RSS

    How can I stack these items like Pinterest does?

    jyeager11 Community Member

      Hi.

       

      I tried asking this yesterday in another thread, but had difficulty properly communicating what I'm trying to do. Since an image is worth a thousand words, I am looking to do this :

      temp2.png

       

      In other words, I have items (DIVs) of various/dynamic heights (but identical/static widths) to stack and fill a layout with.

       

      Normally, I would create a single-row, multi-column table and just put (for example) 5 items in each of them. However, because these items have various/dynamic heights, I could end up with a column that has 5 really long ones next to a column that has 5 really short ones, leaving a huge gaping space at the end of the latter.

       

      If you click here, you'll notice without even looking at the code that the Pinterest model is a little smarter than that. It doesn't put the exact same number of items in each column. Instead, it looks to fill them all in such a way that the all end (more or less) at the same spot. So if a column has taller items in it than the column next to it, it will contain fewer items, so that this column doesn't end up being much longer than the others.

       

      What is the best way of accomplishing this?

       

      I tried NOT using columns and just stacking divs, but when I do that, I get this :

      temp.png

      There's no container here keeping those 4 top items horizontally aligned, just 8 DIVs stacked one after the other. Yet the appearance of a "row" container is still there, because HTML tries to horizontally align these things even though I never asked it to.

       

      Should I just give up on the idea of trying to make the columns end (more or less) at the same point, and just do it the mechanical way? IE : X columns, Y items per column, with no attention paid to the height of the content items? And just live with the fact that one column may end up sticking out like a sore thumb because the items in it are taller than the average?

        • 1. Re: How can I stack these items like Pinterest does?
          bemdesign Community Member

          They are using Javascript to figure out the heights of elements and, likely, selectively adding/removing classes or calling in appropriate sized content. Disable jaavscript and watch Pintrest fail (poor accessibility that).

           

          I would just go simple and ignore uneven columns. If your content is interesting and your design good, I bet most people won't even notice uneven columns.

          • 2. Re: How can I stack these items like Pinterest does?
            jyeager11 Community Member

            Doesn't seem to be hurting Pinterest's bottom line. No offense, but sometimes I think you compatibility Nazis are doing yourselves more harm than good. There is risk/reward associated with every technology, and eliminating anything that won't work on Netscape 2 with everything disabled is a very self-destructive way of approaching building things. (IMHO, YMMV)

            • 3. Re: How can I stack these items like Pinterest does?
              bemdesign Community Member

              That point of view is why a whole bunch of sites in the 90's had a "Made for xBrowser" and would break in any browser not "x". When you're visually impaired and using a screenreader to visit a popular site on the internet and the site doesn't work because they require Javascript...how would that make you feel? Is there a valid reason why that content can't be accessed, even if not in its best "designed state"? This isn't about making your page work for a particular browser, but making it work for *any* user agent that visits the page.

               

              My sites may not look pretty in IE6, but the content is accessible and usable, regardless of the user agent/browser visiting the site.

               

              So while I agree that you shouldn't neccessarily try to make the site work for old browsers and technology, there's no reason to make the site content not accessible because javascript doesn't work for that person (for whatever reason).

              • 4. Re: How can I stack these items like Pinterest does?
                Nancy O. CommunityMVP

                I second that! 

                Pinterest's arrogance is pretty shocking. JavaScript is required for lots of sites, but they don't black out the content if its disabled. That's a horrible business model.  I wonder how long it will be before someone sues Pinterest.

                 

                 

                Nancy O.