Question

我已将jQuery插件包含在我的设计中，但它不太合适。文档提供的CSS类只显示：

宽度：25％

为了我的目的，我改变了：

宽度：24％向左飘浮 margin-right：5px

它几乎是正确的（但不确定是否需要）但插件的一般想法不起作用，因为你会看到左边的两个大间隙没有插入到位。我无法分辨我的＆＃39;项目中的其他属性。 div可能需要改变吗？

我也在使用Bootstrap。

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;
}

Answer 1

我发现砌体根本没有触及元素：

<!-- 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>

仍然没有完美的工作，但我要求的主要原因只是让它最初工作，现在它。

部分工作取决于项目大小

1 个答案: