0

大家好，我对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>
4

1 回答 1

1

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

如果需要，请使用 CDN 中的 url

<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您使用的选项还必须考虑每个元素的全宽（包括 paddings/margins）。

所以，因为你有一个margin:3px项目.break，你将不得不考虑 6 个额外的像素

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

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

演示在 http://jsfiddle.net/C2mCw/2/

于 2013-10-07T13:32:27.987 回答