代码在 JSFiddle 中有效，但在 Dreamweaver 中无效（不涉及 jquery）答案

【问题标题】：Code works in JSFiddle but doesn't work in Dreamweaver (no jquery involved)代码在 JSFiddle 中有效，但在 Dreamweaver 中无效（不涉及 jquery）
【发布时间】：2014-12-07 13:24:55
【问题描述】：

我知道之前有人问过这个问题，但他们中的大多数最终都有一些非法字符或缺少我没有的 jquery 调用。

故事：

我想使用 Masonry 创建层叠网格瓷砖布局，填充瓷砖之间的间隙。此外，我希望使用 CSS3 'resize' 属性手动调整图块的大小。我在 Dreamweaver 中编写了代码，但无法让 Masonry 功能正常工作，所以我想我会将我的代码粘贴到 jsFiddle 上并在此处发布一个问题寻求建议。

令我惊讶的是，该代码能够在 jsFiddle 上运行。但是，当我在 Dreamweaver 上再次尝试时，它没有工作。

正如您在下面的屏幕截图中所见，在 jsFiddle 中代码工作正常，砌体功能正常工作（填充瓷砖之间的间隙），而在 Dreamweaver 中砌体不起作用。

这是 jsfiddle 中的代码截图 - 砌体工程，瓷砖之间的空隙被填满：

http://postimg.org/image/5zb1nrd1f/

这是 Dreamweaver 中代码的屏幕截图 - Masonry not working

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>

【问题讨论】：

标签： css resize jsfiddle tile masonry

【解决方案1】：

将您的 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 在您尝试修改它之前已经准备好。

【讨论】：

谢谢，这解决了我的问题。但是现在当我将图像输入到
容器中时，我意识到图像重叠，所以我尝试了 imageLoaded 插件，但它不能正常工作。你能帮我解决这个问题吗？ jsfiddle.net/umnh1d0c/3
我在您的示例中看不到任何图像，它似乎已损坏，因为它缺少 imageLoaded 插件（请参阅外部资源选项卡）：jsfiddle.net/umnh1d0c/5。如果图像仍然重叠，您始终可以将它们设置为这些 div 的背景（在 css 中使用背景图像），或者根本不设置 div 的宽度/高度。
奇怪，我以为imagesLoaded插件已经包含在Masonry js文件中了。我再去看看。
感谢 Bart 迄今为止的所有帮助。如您所说，下载了 imagesLoaded 插件，一切正常。但是，现在我意识到调整大小功能在调整大小时不会像应用 Masonry 之前那样移动其他框。例如，在下面的小提琴中，当我调整大小时说，一个紫色的盒子，它周围的盒子也应该移开。目前它所做的只是“隐藏”在其他盒子后面，这不是我想要的。当一个盒子正在调整大小时，你能想出任何方法让盒子移开吗？ jsfiddle.net/umnh1d0c/6
这是一个在调整大小时框应如何移动的示例：jsfiddle.net/j5810z6t