我知道之前有人问过这个问题，但大多数问题最终都有一些非法字符或缺少 jquery 调用，而我没有。
故事:
我想使用 Masonry 创建一个层叠的网格图 block 布局，并填充图 block 之间的间隙。此外，我希望使用 CSS3 的“resize”属性手动调整图 block 的大小。我在 Dreamweaver 中编写了代码，但无法使 Masonry 功能正常工作，所以我想我应该将我的代码粘贴到 jsFiddle 上并在此处发布问题以寻求建议。
令我惊讶的是，代码成功地在 jsFiddle 上运行。然而，当我回去在 Dreamweaver 上再次尝试时，它没有用。
如您在下面的屏幕截图中所见，在 jsFiddle 中代码运行良好并且 Masonry 功能正常运行(瓷砖之间的间隙被填充)，而在 Dreamweaver Masonry 中不起作用。
这是 jsfiddle 中代码的屏幕截图 - Masonry 工作并且瓷砖之间的间隙被填充:
http://postimg.org/image/5zb1nrd1f/
这是 Dreamweaver 中代码的屏幕截图 - Masonry 不工作
http://postimg.org/image/qyr5f9epv/
这是我的代码:
<!doctype html>
<html>
<head>
<script src="masonry.pkgd.min.js"></script>
<script>
var container = document.querySelector('.wall');
var msnry = new Masonry( container, {
// options
columnWidth: 20,
itemSelector: '.box'
});
</script>
<style>
.box
{background-color:purple;
text-align:center;
border: 4px solid aquamarine;
height:250px;
width:250px;
float:left;
margin:5px;
}
.box.b
{background-color:yellowgreen;
text-align:center;
border: 4px solid pink;
height:400px;
width:250px;
float:left;
margin:5px;
}
</style>
</head>
<body>
<div class="wall">
<div class="box "></div>
<div class="box b "></div>
<div class="box"></div>
<div class="box b "></div>
<div class="box b"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
最佳答案
将您的 Masonry 代码放在 </body> 之前, 不在 <head> ，它在 JSFiddle 中工作，因为它加载了你的代码 onLoad .
这是你的案例(它不起作用):
http://jsfiddle.net/bartkarp/umnh1d0c/1/
下面是 body 标签中的相同代码:
http://jsfiddle.net/bartkarp/umnh1d0c/2/
所以你的代码应该更像:
<!doctype html>
<html>
<head>
<script src="masonry.pkgd.min.js"></script>
<style>
.box
{background-color:purple;
text-align:center;
border: 4px solid aquamarine;
height:250px;
width:250px;
float:left;
margin:5px;
}
.box.b
{background-color:yellowgreen;
text-align:center;
border: 4px solid pink;
height:400px;
width:250px;
float:left;
margin:5px;
}
</style>
</head>
<body>
<div class="wall">
<div class="box "></div>
<div class="box b "></div>
<div class="box"></div>
<div class="box b "></div>
<div class="box b"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<script>
var container = document.querySelector('.wall');
var msnry = new Masonry( container, {
// options
columnWidth: 20,
itemSelector: '.box'
});
</script>
</body>
</html>
基本上你试图在 DOM 准备好之前运行 Masonry，方法是将你的 JS 放在 </body> 之前结束标记，您可以在尝试修改 DOM 之前确保 DOM 已准备就绪。
关于css - 代码在 JSFiddle 中有效，但在 Dreamweaver 中无效(不涉及 jquery)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27343080/