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 发布的解决方案后，我开始更多地讨论它 - 他解决了崩溃问题，但我需要在它们之间保留边距，同时保留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列不能完全组成整个宽度，它们只有几个像素。

砌体元素相互坍塌

3 个答案: