Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

pinterest style image layout by using css3 only (including infinite scrolling)

Pinterest Style Image Layout By Using Css3 Only (including Infinite Scrolling)

pinterest style image layout by using css3 only (including infinite scrolling)

Problem

I am trying to stack images in a table style, buy it has to be responsive and with infinite scroll.

This means that the images should be in the width between 100px and 200px, and the number of column should fit accordingly.

I have tried using columns (css3) but when adding more images (in infinite scroll), it adds the images to the last column (and not to the bottom row.

So next try was to do float:left; and works well except for the white margin at the right.

Limitations:

  1. No JS
  2. CSS3 only is fine Fully responsive (should work when resizing the screen)
  3. Images MUST be cropped and center (this is why I used background-image)
  4. New images must be added to the bottom

Here is a sample code I used http://jsfiddle.net/SsTZe/9/:

.imgDiv {
    background-image: url('http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png');
    background-size: cover;
    background-position: center center;
   // min-width: 100px;
   // max-width:200px;
    width:200px;
    height: 100px;
    float:left;
    border:solid 1px;
}
Problem courtesy of: Sam Agmon

Solution

To accomplish a Pinterest style layout with Infinite Scrolling you have to use javascript. The problem you outlined using css3 columns is the reason why. Two popular jQuery libraries for this are

Masonry - http://masonry.desandro.com/

and

Isotope - http://isotope.metafizzy.co/

If you want a more simple image column layout you can use the css property inline-block

css

.item{
   display:inline-block;
   width:25%; /* ~25% width of each item so in this case 4 columns */
}

Here is a full working fiddle (responsive styles are crude just for example)

http://jsfiddle.net/ye69U/

Note inline-block and behaves differently from css3 columns. When using css3 columns items will be stacked vertically in the number of columns specified from left to right. When using inline-block items will will be positioned in rows from right to left. where the height of each row will be the height of the tallest element in that row.

Solution courtesy of: Robin

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

pinterest style image layout by using css3 only (including infinite scrolling)

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×