砖石网格未正常显示 [英] Masonry grid not showing properly
本文介绍了砖石网格未正常显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里我试图获得砌体网格到我的引导行值。但是当我启动砌体网格，我得到的网格，在下面的行中的项目之间有很多空间。如何解决这个问题？
全部HTML：
！DOCTYPE html>
< html>
< head>
< link href =// netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css =stylesheet>
< style>
.grid-item {width：400px;}
< / style>
< / head>
< body>
< div class =container-fluid>
< div class =row>
< div class =grid>
< div class =panel-default>< div - < div class =col-xs-10 col-sm-4 col-md-4 col-lg-2 item> class =panel-body>< a href =product-description.php？product_id = 17>< br>< br>< img class =product_listing_img img-responsivesrc =http ：//www.arredatutto.com/en/images/icecat/21892178-52336.jpg>< br>< / a>< a href =product-description.php？product_id = 17class = productname> Campingaz Expert Plus Gas Barbecue< / a>< br>< br>< span class =price>₹7995 / - < / span>< h4>< < strike class =maxprice> 17800< / strike>< / span>< / h4>< span class =owners> =tooltipdata-placement =righttitle =由ashissin提议class =proposer_icon>< img class =img-responsivesrc =libraries / images / avatar / avatar-1.png < / span>< a href =m passengers.phpclass =buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12> < span class =glyphicon glyphicon-shopping-cart>< / span>添加到购物车< / a>< / div>< / div>< / div>
< div class =col-xs-10 col-sm-4 col-md-4 col-lg-2 item>< div class = -default>< div class =panel-body>< a href =product-description.php？product_id = 15>< br>< br>< img class =product_listing_img img-responsivesrc =http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg>< br>< / a>< a href =product-description。 php？product_id = 15class =productname> Milagrow游泳池机器人：RoboPhelps< / a>< br>< br>< span class =price>₹29709 / - < / span> < h4>< span>₹< strike class =maxprice> 150000< / strike>< / span>< / h4>< span class =owners> / span>< span data-toggle =tooltipdata-placement =righttitle =ashissin提议class =proposalser_icon>< img class =img-responsivesrc =libraries / images /avatars/avatar-1.png\"></span><a href =mucasian.phpclass =购买按钮btn btn警告col-xs-12 col-sm-12 col-md- 12 col-lg-12>< span class =glyphicon glyphicon-shopping-cart>< / span>添加到购物车< / a>< / div>< / div>< / div>
< div class =col-xs-10 col-sm-4 col-md-4 col-lg-2 item>< div class = -default>< div class =panel-body>< a href =product-description.php？product_id = 33>< br>< br>< img class =product_listing_img img-responsivesrc =http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg>< br>< / a>< a href =product-description。 php？product_id = 33class =productname> Stanley Socket Set< / a>< br>< br>< span class =price> $ 0 / - < / span>< h4> ;< span>₹< strike class =maxprice> 3< / strike>< / span>< / h4>< span class =owners> < span data-toggle =tooltipdata-placement =righttitle =由ashissin提议class =proposalser_icon>< img class =img-responsivesrc =libraries / images / avatars / avatar-1.png>< / span>< a href =m▼.phpclass =购买按钮btn btn-warning col-xs-12 col-sm-12 col-md-12 col- lg-12>< span class =glyphicon glyphicon-shopping-cart>< / span>添加到购物车< / a>< / div>< / div>< / div>
< div class =col-xs-10 col-sm-4 col-md-4 col-lg-2 item>< div class = -default>< div class =panel-body>< a href =product-description.php？product_id = 36>< br>< br>< img class =product_listing_img img-responsivesrc =http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg>< br>< / a>< a href =product-description。 php？product_id = 36class =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> / span>< span data-toggle =tooltipdata-placement =righttitle =ashissin提议class =proposalser_icon>< img class =img-responsivesrc =libraries / images /avatars/avatar-1.png\"></span><a href =mucasian.phpclass =购买按钮btn btn警告col-xs-12 col-sm-12 col-md- 12 col-lg-12>< span class =glyphicon glyphicon-shopping-cart>< / span>添加到购物车< / a>< / div>< / div>< / div>
< div class =col-xs-10 col-sm-4 col-md-4 col-lg-2 item>< div class = -default>< div class =panel-body>< a href =product-description.php？product_id = 4>< br>< br>< img class =product_listing_img img-responsivesrc =http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg>< br>< / a>< a href =product-description。 php？product_id = 4class =productname> Yamaha 01V96i Digital Mixer< / a>< br>< span class =price>₹88630 / - < / span> h4>< span>₹< strike class =maxprice> 227900< / strike>< / span>< / h4>< span class =owners> ;< span data-toggle =tooltipdata-placement =righttitle =ashissin提议class =proposalser_icon>< img class =img-responsivesrc =libraries / images / avatars /avatar-1.png\"></span><a href =mucasian.phpclass =购买按钮btn btn-warning col-xs-12 col-sm-12 col-md-12 col -lg-12>< span class =glyphicon glyphicon-shopping-cart>< / span>添加到购物车< / a>< / div>< / div>< / div>
< div class =col-xs-10 col-sm-4 col-md-4 col-lg-2 item>< div class = -default>< div class =panel-body>< a href =product-description.php？product_id = 17>< br>< br>< img class =product_listing_img img-responsivesrc =http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg>< br>< / a>< a href =product-description。 php？product_id = 17class =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> >< span data-toggle =tooltipdata-placement =righttitle =ashissin提议class =proposer_icon>< img class =img-responsivesrc =libraries / images / avatar / avatar-1.png>< / span>< a href =mucasian.phpclass =buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12>< span class =glyphicon glyphicon-shopping-cart>< / span>添加到购物车< / a>< / div>< / div>< / div>
< div class =col-xs-10 col-sm-4 col-md-4 col-lg-2 item>< div class = -default>< div class =panel-body>< a href =product-description.php？product_id = 15>< br>< br>< img class =product_listing_img img-responsivesrc =http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg>< br>< / a>< a href =product-description。 php？product_id = 15class =productname> Milagrow游泳池机器人：RoboPhelps< / a>< br>< br>< span class =price>₹29709 / - < / span> < h4>< span>₹< strike class =maxprice> 150000< / strike>< / span>< / h4>< span class =owners> / span>< span data-toggle =tooltipdata-placement =righttitle =ashissin提议class =proposalser_icon>< img class =img-responsivesrc =libraries / images /avatars/avatar-1.png\"></span><a href =mucasian.phpclass =购买按钮btn btn警告col-xs-12 col-sm-12 col-md- 12 col-lg-12>< span class =glyphicon glyphicon-shopping-cart>< / span>添加到购物车< / a>< / div>< / div>< / div>
< div class =col-xs-10 col-sm-4 col-md-4 col-lg-2 item>< div class = -default>< div class =panel-body>< a href =product-description.php？product_id = 33>< br>< br>< img class =product_listing_img img-responsivesrc =http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg>< br>< / a>< a href =product-description。 php？product_id = 33class =productname> Stanley套接字集< / a>< br>< br>< span class =price> $ 0 / - < / span>< h4> ;< span>₹< strike class =maxprice> 3< / strike>< / span>< / h4>< span class =owners> < span data-toggle =tooltipdata-placement =righttitle =由ashissin提议class =proposalser_icon>< img class =img-responsivesrc =libraries / images / avatars / avatar-1.png>< / span>< a href =m▼.phpclass =购买按钮btn btn-warning col-xs-12 col-sm-12 col-md-12 col- lg-12>< span class =glyphicon glyphicon-shopping-cart>< / span>添加到购物车< / a>< / div>< / div>< / div>
< div class =col-xs-10 col-sm-4 col-md-4 col-lg-2 item>< div class = -default>< div class =panel-body>< a href =product-description.php？product_id = 36>< br>< br>< img class =product_listing_img img-responsivesrc =http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg>< br>< / a>< a href =product-description。 php？product_id = 36class =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> / span>< span data-toggle =tooltipdata-placement =righttitle =ashissin提议class =proposalser_icon>< img class =img-responsivesrc =libraries / images /avatars/avatar-1.png\"></span><a href =mucasian.phpclass =购买按钮btn btn警告col-xs-12 col-sm-12 col-md- 12 col-lg-12>< span class =glyphicon glyphicon-shopping-cart>< / span>添加到购物车< / a>< / div>< / div>< / div>
< div class =col-xs-10 col-sm-4 col-md-4 col-lg-2 item>< div class = -default>< div class =panel-body>< a href =product-description.php？product_id = 4>< br>< br>< img class =product_listing_img img-responsivesrc =http://www.arredatutto.com/en/images/icecat/21892178-52336.jpg>< br>< / a>< a href =product-description。 php？product_id = 4class =productname> Yamaha 01V96i Digital Mixer< / a>< br>< span class =price>₹88630 / - < / span> h4>< span>₹< strike class =maxprice> 227900< / strike>< / span>< / h4>< span class =owners> ;< span data-toggle =tooltipdata-placement =righttitle =ashissin提议class =proposalser_icon>< img class =img-responsivesrc =libraries / images / avatars /avatar-1.png\"></span><a href =mucasian.phpclass =购买按钮btn btn-warning col-xs-12 col-sm-12 col-md-12 col -lg-12>< span class =glyphicon glyphicon-shopping-cart>< / span>添加到购物车< / 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>
这是我现在得到的输出：
JS
$（document）.ready（function（）{
$（'grid'）。masonry（{
itemSelector：'.item '，
}）;
}）;
EDIT 使用最新版本的JQuery
here i am trying to get the masonry grid to my bootstrap row values. but when i initiate the masonry grid i am getting the grid with lots of space between the items in below rows. how can i resolve this?
FULL 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>
this is the output i am getting right now:
解决方案
Try this https://jsfiddle.net/2Lzo9vfc/132/
JS
$(document).ready(function(){
$('.grid').masonry({
itemSelector: '.item',
});
});
EDIT Use latest version of JQuery
这篇关于砖石网格未正常显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
