Question

我知道这个问题之前已经被问到，但是大多数人最终都遇到了一些非法字符或者缺少jquery电话，我不知道。

故事：

我想使用Masonry创建一个级联的网格图块布局，填充的图块之间有间隙。此外，我希望使用CSS3手动调整图块大小＆＃39;调整尺寸＆＃39;属性。我在Dreamweaver中编写了代码，但无法使用Masonry功能，所以我想我会将代码粘贴到jsFiddle上并在此处发帖提出建议。

令我惊讶的是，代码设法在jsFiddle上工作。但是，当我再次在Dreamweaver上再次尝试时，它没有工作。

正如您在下面的屏幕截图中所看到的，在jsFiddle中，代码工作正常并且Masonry功能正常工作（填充之间的间隙），而在Dreamweaver中，Masonry不起作用。

这是jsfiddle代码的截图 - 砌体工作和瓷砖之间的间隙填补：

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>

Answer 1

将您的Masonry代码放在</body>之前，而不是<head>，它可以在JSFiddle中运行，因为它会加载您的代码onLoad。

这是你的情况（它不起作用）：

http://jsfiddle.net/bartkarp/umnh1d0c/1/

这里是body标签中的相同代码：

http://jsfiddle.net/bartkarp/umnh1d0c/2/

Code in Body vs Header

所以你的代码看起来应该更像：

<!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。

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

1 个答案: