1

我已经在我的设计中包含了 Masonry 的 jQuery 插件，但它不是很有效。文档提供的 CSS 类简单地显示：

宽度：25%

为了我的目的，我将其更改为：

宽度：24% 浮动：左边距-右边：5px

这几乎是正确的（但不确定是否需要），但是插件的总体思路不起作用，因为您会看到左侧的两个大间隙没有插入到位。我不知道我的“项目”div 上的哪些其他属性可能需要更改？

我也在使用引导程序。

HTML

<div class="item">
        <div class="product">
          <a class="add-fav tooltipHere" data-toggle="tooltip" data-original-title="Add to Wishlist"  data-placement="left">
            <i class="glyphicon glyphicon-heart"></i>
          </a>
          <div class="image"> <a href="product-details.php"><img src="http://quakerrose.com/wp-content/uploads/2012/10/Stapleton-Bench-Furniture-at-Modern-History.jpg" alt="img" class="img-responsive"></a>
            <div class="promotion"><span class="discount">&pound; 17.00</span></div>
          </div>
          <div class="description">
            <h4><a href="product-details.php">Say Cheese Camera Slicer</a></h4>
            <h6><a href="#">By TOMS-TABLES</a></h6>
            <img src="http://upload.wikimedia.org/wikipedia/en/c/ce/Etsy_logo.png" class="product-src-img product-src-etsy" alt="" title="" />
          </div>
        </div>
    </div>

CSS

/** Masonry **/

.item { width: 24%; float: left; margin-right: 5px; }
.item.w2 { width: 50%; }

/** end Masonry **/

.item {
display: block;
height: auto;
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
margin-bottom: 15px;
height: auto;
}
4

1 回答 1

2

我发现 Masonry 根本没有在元素上被触发，因为：

<!-- jQuery Masonry   --> 
<script src="../assets/js/masonry.pkgd.min.js">

    var $container = $('#masonry');
    // initialize
    $container.masonry({
      itemSelector: '.item'
    });

    var msnry = $container.data('masonry');

</script>

它应该是这样的：

<script src="../assets/js/masonry.pkgd.min.js"></script>
<script>
    var $container = $('#masonry');
    // initialize
    $container.masonry({
      itemSelector: '.item'
    });

    var msnry = $container.data('masonry');
</script>

仍然不能完美地工作，但我要求的主要事情只是让它最初能像现在这样工作。

于 2014-09-13T08:57:29.050 回答