砌体JS不会一堆图像垂直

的图像被水平正确对齐，但它们都间隔了垂直..看看这里http://brstudios.co.uk/testing到明白我的意思正确..砌体JS不会一堆图像垂直

我的标记是其次（简体）：

<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"> 
    var $container = $('.portfolio-container'); 
    $container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector : '.break', 
     columnWidth : 429 
    }); 
}); 
</script> 

<style type="text/css"> 
.break { 
    float: left; 
    width: 429px; 
    margin: 10px 20px; 
    } 
</style> 

</head> 

<body> 

<div class="portfolio-container"> 

<?php do { ?> 

<div class="break"> 

// Contents taken from MySQL // 

</div> 

<?php } while ($row_displayPosts = mysql_fetch_assoc($displayPosts)); ?> 

</div> 

</body> 

</html>

我认为它的一部分正在工作，但正如你可以通过链接看到的，它不会垂直移动元素。有没有人有任何指针？

WORKING UPDATE：

<script type="text/javascript"> 

    $(document).ready(function() { 

     var $container = $('.portfolio-container'); 
      $container.imagesLoaded(function(){ 
      $container.masonry({ 
       itemSelector : '.break', 
       columnWidth : 429, 
       gutterWidth : 40  //Added gutter to simulate margin 
      }); 
     }); 

    }); 
    </script>

来源

2012-07-09 user1449737

可能是左边漂浮的休息吗？ – 2012-07-09 20:44:01

@AndrewPeacock在砌体文档中说是使用该标记：'.item { width：220px; margin：10px; float：left; }' – user1449737 2012-07-09 20:45:20

你需要用你的脚本在JQuery的DOM已准备就绪：

$(document).ready(function() { 

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

});

砌体实际上并没有在网页上运行这就是为什么你的元素只是浮动和没有安排你期望他们如何。

编辑：

下载您网页和玩了之后好像你还需要删除：从您的.break类

margin: 10px 20px;

以及包装砌筑脚本在$(document).ready

我怀疑你的利润是makinbg元素太宽，无法堆叠旁边边

来源

2012-07-09 20:56:41 Turnip

停止它一起工作，他们只是显示为他们将没有石工脚本。此外，我很惊讶砖石实际上并没有运行..我如何启用它？ – user1449737 2012-07-09 20:59:03

他们目前正在展示他们没有石工的方式。看看在控制台'$（“。portfolio-container”）中运行以下内容会发生什么：masonry（{itemSelector：'.break'}）;' – 2012-07-09 21:01:31

@iliacholy它显示'portfolio-container' div及其内容在控制台内部 – user1449737 2012-07-09 21:07:03

砌体JS不会一堆图像垂直

回答

相关问题