分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了我在这个jQuery Masonry实现中缺少什么？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我已经在堆栈中筛选了大量的Masonry帖子,并查看了其他tumblr博客,但我无法识别我所缺少的内容.希望你们中的一个可以提供帮助.

有问题的网站可供参考(注意：1或2个时尚泳装照片 – 驯服,但有些可能是NSFW).

如您所见,图像仍未正确垂直堆叠.我哪里出错了？

CSS

#wrapper {
    width: 960px;
    margin: 0 auto;
    BACkground: #000;
    height: 400px;

}

#wrapper .posts {
    BACkground: #ff9900;
    width: 950px;
    position:relative;
    height:100%;
}

#wrapper .entry {
    width: 300px;
    float: left;
}

砌体脚本

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/yflpwuf/SSOm2d3y2/jquery.masonry.min.js"></script>

<script type="text/javascript">

var $posts = $('.posts');

$posts.imagesLoaded( function(){
  $posts.masonry({
    itemSELEctor : '.entry',columnWidth: 300

  });
});

</script>

解决方法

@H_616_23@ 你在这里提供的Masonry脚本似乎没问题(你提供的链接中的那个是错误的).尝试将它移动到文档的底部,就在“body”的结束标记之前

...</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js"></script>
<script src="http://static.tumblr.com/yflpwuf/SSOm2d3y2/jquery.masonry.min.js"></script>

<script type="text/javascript">

var $posts = $('.posts');

$posts.imagesLoaded( function(){
$posts.masonry({
itemSELEctor : '.entry',columnWidth: 300

 });
});

</script>

</body>
</html>