1
我是JS新手。我想实现的正是这种效果展示照片：kristianhammerstad.com砌体：互相重叠的图像
我已经使用砖石，看到代码：http://codepen.io/Kiks/pen/YWzNjr 图像将具有相同的宽度，但高度不同。这是唯一的规则。
视频模拟显示问题：jmp.sh/mMcu1Bb - 只要图像具有不同的高度，网格就会断开，并且图像会彼此叠放在一起。但是，当我有相同的高度的链接图像，网格是好的。
有趣的是，你在视频中看到的问题只出现在我的网站（Chrome，Safari）上，但它在Codepen中很好地工作（第一次加载后，即使我调整浏览器窗口大小，总是OK）。你能解释一下吗？ Codepen在这方面有什么特别之处？
这正是我的代码。你能告诉我我错过了什么？我只是在学习，请耐心等待。谢谢
/* Masonry magic */
.container { width: 96% !important; margin: 0 auto; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#masonry { margin: 0 auto; width: 100%; position: relative; /*z-index:2001;*/ }
.item {
width: 460px; height: auto; background: invisible;
margin: 0 auto 20px auto;
/*float: left;*/
}
.card-text {
width: 460px;
padding-right: 40px;
}
/* End of Masonry magic */
body { padding-top: 60px; }
.clearfix:before,
.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }
.lead {
font-weight: 400;
font-size: 24px;
line-height: 1.6;
color: #444444;
margin-bottom: 40px;
}
.text {
text-align: left;
font-size: 18px;
line-height: 1.7;
color: #444444;
}
p {
margin-bottom: 20px;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Showcase Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Own styles -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- <div id="masonry">
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
</div> -->
<div id="masonry">
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x800"></div>
<div class="item"><img src="http://placehold.it/460x600"></div>
<div class="item"><img src="http://placehold.it/460x460"></div>
<div class="item"><img src="http://placehold.it/460x300"></div>
<div class="item"><img src="http://placehold.it/460x400"></div>
<div class="item"><img src="http://placehold.it/460x200"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js"></script>
<script>
var container = document.querySelector('#masonry');
var msnry = new Masonry(container, {
columnWidth: 460,
gutter: 20,
isFitWidth: true,
itemSelector: '.item'
});
</script>
</body>
</html>