代码在JSFiddle中有效，但在Dreamweaver中不起作用（不涉及jquery）

blurgoon 发表于 Dev

模糊的

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

故事：

我想使用Masonry来创建级联的网格图块布局，并在填充的图块之间形成间隙。另外，我希望使用CSS3的“调整大小”属性来手动调整图块的大小。我用Dreamweaver编写了代码，但无法使用Masonry功能，因此我想将代码粘贴到jsFiddle上并在此处发布问题以寻求建议。

令我惊讶的是，该代码成功地在jsFiddle上运行。但是，当我回去在Dreamweaver上再次尝试时，它不起作用。

如下面的屏幕截图所示，在jsFiddle中，代码可以正常工作，而Masonry功能可以正常工作（填充瓷砖之间的间隙），而在Dreamweaver中，Masonry则无法工作。

这是jsfiddle中代码的屏幕截图-石工作品，并且平铺之间的空隙得到了填补：

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

这是Dreamweaver中代码的屏幕截图-石工不起作用

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代码放置在JSFiddle中</body>，而不是放置在<head>它之前，因为它将代码加载到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>