砌体元素相互倒塌

Question

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

CodePen： 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

Answer 2

抱歉，输入了错误的项目。我必须在其他地方。

Answer 3

在查看了 Nenad Vracar 在 cmets 中发布的解决方案后，我开始更多地使用它 - 他修复了折叠问题，但我需要它们之间的边距，同时保持 3 列。

修复，将以下内容添加/更改到现有的 css 类：

.item {
    width: calc(33.33333333% - 10px);
    margin-right: 10px;

    &:nth-child(3n) {
        margin-right: 0;
    }

}

新的 JS：

var $grid = $('.grid').masonry({
  itemSelector: '.item',
  percentPosition: true
});

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

唯一的问题是 3 列不完全完全组成整个宽度，它们短了几个像素。