jquery - masonry 元素相互坍塌

Question

第一次使用jQuery插件enter link description here我不知道为什么它不能正确显示；我的意思是我假设它与绝对定位有关，因为它们都相互折叠，但我相信我已经正确设置了吗？

代码笔: http://codepen.io/gutterboy/pen/bENEyq

编辑:

我现在有了这个，http://codepen.io/gutterboy/pen/xZbVBw - 我似乎无法使用它们之间有间距的 3 列。

HTML:

<div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="grid">
            <div class="item">
              <div class="image">
                <img src="http://weknowyourdreams.com/images/car/car-03.jpg" class="img-responsive" />
              </div>
              <div class="text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus.
              </div>
            </div>
            <!-- Item Ends -->
            <div class="item">
              <div class="text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus.
              </div>
            </div>
            <!-- Item Ends -->
            <div class="item">
              <div class="image">
                <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150918170501-frankfurt-motor-show-concept-cars-4-super-169.jpg" class="img-responsive" />
              </div>
              <div class="text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus.
              </div>
            </div>
            <!-- Item Ends -->
            <div class="item">
              <div class="image">
                <img src="http://resources.carsguide.com.au/styles/cg_hero_large/s3/McLaren-P1_0.jpg" class="img-responsive" />
              </div>
              <div class="text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus.
              </div>
            </div>
            <!-- Item Ends -->
            <div class="item">
              <div class="image">
                <img src="http://car-pictures.cars.com/images/?IMG=cac10foc051c01401.png&WIDTH=624&AUTOTRIM=1&SPECIAL=&ACT=F" class="img-responsive" />
              </div>
              <div class="text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus.            
              </div>
            </div>
            <!-- Item Ends -->
            <div class="item">
              <div class="image">
                <img src="http://weknowyourdreams.com/images/car/car-03.jpg" class="img-responsive" />
              </div>
              <div class="text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus.
              </div>
            </div>
            <!-- Item Ends -->
            <div class="item">
              <div class="image">
                <img src="http://media.truelocal.com.au/1/B/11A5BD61-BB2D-4E6D-BF87-FB2C5B4C56CB/budget-car-and-truck-rental-brisbane-brisbane-car-rental-rental-cars-brisbane-5427-938x704.jpg" class="img-responsive" />
              </div>
              <div class="text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus.
              </div>
            </div>
            <!-- Item Ends -->
            <div class="item">
              <div class="image">
                <img src="http://weknowyourdreams.com/images/car/car-03.jpg" class="img-responsive" />
              </div>
              <div class="text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus.
              </div>
            </div>
            <!-- Item Ends -->
            <div class="item">
              <div class="image">
                <img src="http://weknowyourdreams.com/images/car/car-03.jpg" class="img-responsive" />
              </div>
              <div class="text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus.
              </div>
            </div>
            <!-- Item Ends -->
            <div class="item">
              <div class="image">
                <img src="http://weknowyourdreams.com/images/car/car-03.jpg" class="img-responsive" />
              </div>
              <div class="text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus.
              </div>
            </div>
            <!-- Item Ends -->
            <div class="item">
              <div class="image">
                <img src="http://weknowyourdreams.com/images/car/car-03.jpg" class="img-responsive" />
              </div>
              <div class="text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus.
              </div>
            </div>
            <!-- Item Ends -->        
          </div>
        </div>
      </div>
    </div>

SCSS:

.item {

  width: 33.33333%;
  margin-bottom: 20px;

  .image {

  }

  .text {
    padding: 15px;
  }

}

.grid-sizer {
  width: 33.33333%;
}

JS:

var $grid = $('.grid').masonry({
    itemSelector: '.item',
    columnWidth: '.grid-sizer',
    columnWidth: '33.33333%',
    percentPosition: true,
    gutter: 10
  });

// layout Masonry after each image loads
grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});

我在这里做错了什么？

Answer 1

如果用标准的 js 运行它就可以了

$(document).ready( function() {

  $('.grid').masonry({
    itemSelector: '.item',
    columnWidth: 160
  });

});

http://masonry.desandro.com/layout.html