砌体网格未正确显示答案

【问题标题】：Masonry grid not showing properly砌体网格未正确显示
【发布时间】：2015-11-20 07:43:58
【问题描述】：

在这里，我试图将砌体网格设置为我的引导行值。但是当我启动砖石网格时，我得到的网格在下面几行的项目之间有很多空间。我该如何解决这个问题？

完整的 HTML：

<!DOCTYPE html>
<html>
<head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .grid-item {width:400px;}
    </style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="grid">
    <div class="col-xs-10 col-sm-4 col-md-4 col-lg-2 item"><div class="panel panel-default"><div class="panel-body"><a href="product-description.php?product_id=17"><br><br><img class="product_listing_img img-responsive" src="http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg"><br></a><a href="product-description.php?product_id=17" class="productname">Campingaz Expert Plus Gas Barbecue</a><br><br><span class="price">₹7995/-</span><h4><span>₹<strike class="maxprice">17800</strike></span></h4><span class="owners">0 of 4 owners reached</span><span data-toggle="tooltip" data-placement="right" title="proposed by ashissin" class="proposer_icon"><img class="img-responsive" src="libraries/images/avatars/avatar-1.png"></span><a href="mycart.php" class="buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12"><span class="glyphicon glyphicon-shopping-cart"></span> Add to cart</a></div></div></div>


    <div class="col-xs-10 col-sm-4 col-md-4 col-lg-2 item"><div class="panel panel-default"><div class="panel-body"><a href="product-description.php?product_id=15"><br><br><img class="product_listing_img img-responsive" src="http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg"><br></a><a href="product-description.php?product_id=15" class="productname">Milagrow Swimming Pool Robot : RoboPhelps</a><br><br><span class="price">₹29709/-</span><h4><span>₹<strike class="maxprice">150000</strike></span></h4><span class="owners">0 of 8 owners reached</span><span data-toggle="tooltip" data-placement="right" title="proposed by ashissin" class="proposer_icon"><img class="img-responsive" src="libraries/images/avatars/avatar-1.png"></span><a href="mycart.php" class="buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12"><span class="glyphicon glyphicon-shopping-cart"></span> Add to cart</a></div></div></div>


    <div class="col-xs-10 col-sm-4 col-md-4 col-lg-2 item"><div class="panel panel-default"><div class="panel-body"><a href="product-description.php?product_id=33"><br><br><img class="product_listing_img img-responsive" src="http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg"><br></a><a href="product-description.php?product_id=33" class="productname">Stanley Socket Set</a><br><br><span class="price">₹0/-</span><h4><span>₹<strike class="maxprice">3</strike></span></h4><span class="owners">0 of 4 owners reached</span><span data-toggle="tooltip" data-placement="right" title="proposed by ashissin" class="proposer_icon"><img class="img-responsive" src="libraries/images/avatars/avatar-1.png"></span><a href="mycart.php" class="buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12"><span class="glyphicon glyphicon-shopping-cart"></span> Add to cart</a></div></div></div>


    <div class="col-xs-10 col-sm-4 col-md-4 col-lg-2 item"><div class="panel panel-default"><div class="panel-body"><a href="product-description.php?product_id=36"><br><br><img class="product_listing_img img-responsive" src="http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg"><br></a><a href="product-description.php?product_id=36" class="productname">Deemark Portable Home Spa Havvy Massager</a><br><br><span class="price">₹0/-</span><h4><span>₹<strike class="maxprice">3</strike></span></h4><span class="owners">1 of 4 owners reached</span><span data-toggle="tooltip" data-placement="right" title="proposed by ashissin" class="proposer_icon"><img class="img-responsive" src="libraries/images/avatars/avatar-1.png"></span><a href="mycart.php" class="buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12"><span class="glyphicon glyphicon-shopping-cart"></span> Add to cart</a></div></div></div>


    <div class="col-xs-10 col-sm-4 col-md-4 col-lg-2 item"><div class="panel panel-default"><div class="panel-body"><a href="product-description.php?product_id=4"><br><br><img class="product_listing_img img-responsive" src="http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg"><br></a><a href="product-description.php?product_id=4" class="productname">Yamaha 01V96i Digital Mixer</a><br><br><span class="price">₹88630/-</span><h4><span>₹<strike class="maxprice">227900</strike></span></h4><span class="owners">0 of 4 owners reached</span><span data-toggle="tooltip" data-placement="right" title="proposed by ashissin" class="proposer_icon"><img class="img-responsive" src="libraries/images/avatars/avatar-1.png"></span><a href="mycart.php" class="buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12"><span class="glyphicon glyphicon-shopping-cart"></span> Add to cart</a></div></div></div>


    <div class="col-xs-10 col-sm-4 col-md-4 col-lg-2 item"><div class="panel panel-default"><div class="panel-body"><a href="product-description.php?product_id=17"><br><br><img class="product_listing_img img-responsive" src="http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg"><br></a><a href="product-description.php?product_id=17" class="productname">Campingaz Expert Plus Gas Barbecue</a><br><br><span class="price">₹7995/-</span><h4><span>₹<strike class="maxprice">17800</strike></span></h4><span class="owners">0 of 4 owners reached</span><span data-toggle="tooltip" data-placement="right" title="proposed by ashissin" class="proposer_icon"><img class="img-responsive" src="libraries/images/avatars/avatar-1.png"></span><a href="mycart.php" class="buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12"><span class="glyphicon glyphicon-shopping-cart"></span> Add to cart</a></div></div></div>


    <div class="col-xs-10 col-sm-4 col-md-4 col-lg-2 item"><div class="panel panel-default"><div class="panel-body"><a href="product-description.php?product_id=15"><br><br><img class="product_listing_img img-responsive" src="http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg"><br></a><a href="product-description.php?product_id=15" class="productname">Milagrow Swimming Pool Robot : RoboPhelps</a><br><br><span class="price">₹29709/-</span><h4><span>₹<strike class="maxprice">150000</strike></span></h4><span class="owners">0 of 8 owners reached</span><span data-toggle="tooltip" data-placement="right" title="proposed by ashissin" class="proposer_icon"><img class="img-responsive" src="libraries/images/avatars/avatar-1.png"></span><a href="mycart.php" class="buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12"><span class="glyphicon glyphicon-shopping-cart"></span> Add to cart</a></div></div></div>


    <div class="col-xs-10 col-sm-4 col-md-4 col-lg-2 item"><div class="panel panel-default"><div class="panel-body"><a href="product-description.php?product_id=33"><br><br><img class="product_listing_img img-responsive" src="http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg"><br></a><a href="product-description.php?product_id=33" class="productname">Stanley Socket Set</a><br><br><span class="price">₹0/-</span><h4><span>₹<strike class="maxprice">3</strike></span></h4><span class="owners">0 of 4 owners reached</span><span data-toggle="tooltip" data-placement="right" title="proposed by ashissin" class="proposer_icon"><img class="img-responsive" src="libraries/images/avatars/avatar-1.png"></span><a href="mycart.php" class="buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12"><span class="glyphicon glyphicon-shopping-cart"></span> Add to cart</a></div></div></div>


    <div class="col-xs-10 col-sm-4 col-md-4 col-lg-2 item"><div class="panel panel-default"><div class="panel-body"><a href="product-description.php?product_id=36"><br><br><img class="product_listing_img img-responsive" src="http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg"><br></a><a href="product-description.php?product_id=36" class="productname">Deemark Portable Home Spa Havvy Massager</a><br><br><span class="price">₹0/-</span><h4><span>₹<strike class="maxprice">3</strike></span></h4><span class="owners">1 of 4 owners reached</span><span data-toggle="tooltip" data-placement="right" title="proposed by ashissin" class="proposer_icon"><img class="img-responsive" src="libraries/images/avatars/avatar-1.png"></span><a href="mycart.php" class="buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12"><span class="glyphicon glyphicon-shopping-cart"></span> Add to cart</a></div></div></div>


    <div class="col-xs-10 col-sm-4 col-md-4 col-lg-2 item"><div class="panel panel-default"><div class="panel-body"><a href="product-description.php?product_id=4"><br><br><img class="product_listing_img img-responsive" src="http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg"><br></a><a href="product-description.php?product_id=4" class="productname">Yamaha 01V96i Digital Mixer</a><br><br><span class="price">₹88630/-</span><h4><span>₹<strike class="maxprice">227900</strike></span></h4><span class="owners">0 of 4 owners reached</span><span data-toggle="tooltip" data-placement="right" title="proposed by ashissin" class="proposer_icon"><img class="img-responsive" src="libraries/images/avatars/avatar-1.png"></span><a href="mycart.php" class="buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12"><span class="glyphicon glyphicon-shopping-cart"></span> Add to cart</a></div></div></div>
</div>
</div>
</div>

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
    <script>
        $(document).ready(function(){   
            $('.grid').masonry({
              itemSelector: '.grid-item',
              columnWidth: 400
            });
        });
    </script>
</body>
</html>

这是我现在得到的输出：

【问题讨论】：

看起来 Masonry 没有初始化或根本没有工作 - 布局正是您关闭 Masonry 时所得到的。检查您的控制台日志。它说什么？
另外，您可能希望在标记的适当位置添加行，以便在未打开 js 时布局可以正常工作。

标签： jquery css jquery-masonry masonry

【解决方案1】：

试试这个https://jsfiddle.net/2Lzo9vfc/132/

$(document).ready(function(){   
  $('.grid').masonry({
    itemSelector: '.item',
  });
});

编辑使用最新版本的 JQuery

【讨论】：

【解决方案2】：

砌体未初始化。另外，itemSelector不能是.grid-item，只能是.item em>。像这样修复它：

$(document).ready(function(){   
    var container = document.querySelector('.grid');
    var msnry = new Masonry( container, {
        // options
        columnWidth: 400,
        itemSelector: '.item'
    });
});

这里是JSFiddle。希望对你有帮助。

【讨论】：