javascript砌体不工作答案

【问题标题】：javascript masonry not workingjavascript砌体不工作
【发布时间】：2013-10-07 13:22:22
【问题描述】：

大家好，我对 javascript masonry 有一个问题，这是代码，这只是一个测试件，请帮助我....

我已经尝试过这段代码，但这不起作用请帮助我.. 提前谢谢..

感谢任何帮助...

<html>

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/jquery.masonry.min.js">    </script>
 <script type="text/javascript" src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

var $container = $('.portfolio-container');
  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector : '.break',
      columnWidth : 129
  });
});

});
</script>

<style type="text/css">
 .break {
 float: left;
 width: 129px;
 margin: 3px;
background-color:blue;

 }
 .break1{height:30px;}
 .break2{height:50px;}
 .break3{height:20px;}
 .break4{height:70px;}
 </style>

 </head>

 <body>

 <div class="portfolio-container">

 <?php 
        for ($i=1; $i<9; $i++){
        ?>
            <div class="break1 break" >

            </div><div class="break2 break" >

            </div><div class="break3 break">

            </div><div class="break4 break" >

            </div>
        <?php } ?>

</div>

</body>

</html>

【问题讨论】：

这是代码，只是一个测试片。真正的东西在哪里？
js标签<script type="text/javascript" language="javascript">在哪里？

标签： javascript jquery css jquery-masonry

【解决方案1】：

问题是您使用的两个路径/url（用于砌体和加载图像的插件）都是错误的..

如果需要，请使用 CDN 中的网址

<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.1/masonry.pkgd.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>

或下载这些文件并链接到它们。

演示地址 http://jsfiddle.net/C2mCw/1/

除了错误的 url，您使用的 columnWidth 选项必须考虑每个元素的完整宽度（包括填充/边距）。

因此，由于您在 .break 项目上有一个 margin:3px，因此您将不得不考虑额外的 6 个像素

所以你真的应该把它设置为 135 而不是 129

$container.masonry({
    itemSelector : '.break',
    columnWidth : 135
});

演示地址 http://jsfiddle.net/C2mCw/2/

【讨论】：