CODEWITHSUNDEEP
jqueryjquery-masonry
user2647290
user2647290

Reputation:

jQuery Masonry layout with two specific sizes

I'm creating a layout with Masonry that only has two sizes available: a small one and a larger one. However, I created a random selection and they aren't stacking together correctly.

Here is my HTML & JS: 

<div class="container">
   <div class="featured"></div>
   <div class="featured small"></div>
   <div class="featured small"></div>
   <div class="featured"></div>
   <div class="featured small"></div>
   <div class="featured small"></div>
   <div class="featured"></div>
   <div class="featured small"></div>
   <div class="featured small"></div>
   <div class="featured"></div>
   <div class="featured small"></div>
   <div class="featured small"></div>
   <div class="featured small"></div>
   <div class="featured small"></div>
</div>

<script>
docReady( function() {
var $container = $('.container');
   $container.imagesLoaded(function(){
         $container.masonry({
        columnWidth: 225
        itemSelector: '.featured' 
    isFitWidth: true
            });
          });
});
</script>

Here is my CSS:

.container {
  background: #EEE;
  width:960px;
  margin-bottom:20px;
}

.featured {
  width:440px;
  height:440px;
  margin:10px;
  float:left;
  background:#09F;
}

.featured.small{ 
  width:210px;
  height:210px;
}

I'd like it if it had the same effect as this site: Zappos Tweet Wall

But I'm having trouble grasping how this library works.

Upvotes: 0

Views: 212

Answers (1)

kei
kei

Reputation: 20491

Looks fine to me

var $container = $('#container');
$container.masonry({
    columnWidth: 110,
    itemSelector: '.featured'
});

I think it's because of your imagesLoaded function. (Also, it might be because of your docReady)

Upvotes: 1

Related Questions