CODEWITHSUNDEEP
css
Sam Agmon
Sam Agmon

Reputation: 3

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

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;
}

Upvotes: 0

Views: 987

Answers (1)

Robin
Robin

Reputation: 686

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.

Upvotes: 1

Related Questions