1

我正在滚动我自己的无 DB 照片库（住在这里），并且想使用 Masonry 来布置没有大量空白区域的缩略图（尽管这更像是我网站上的“灰色空间”）。

我相信我正在正确实施它：

var $container=$('#main');
        $container.imagesLoaded(function(){
            $container.masonry({
                itemSelector : '.box',
                columnWidth: 200
            });
        });

也许一个问题是我正在使用另一段代码来圆化缩略图的边缘：

$("img.rounded_corners").each(function() {
            $(this).wrap('<div class="box rounded_corners" />');
            var imgSrc = $(this).attr("src");
            var imgHeight = $(this).height();
            var imgWidth = $(this).width();
            $(this).parent()
                .css("background-image", "url(" + imgSrc + ")")
                .css("background-repeat","no-repeat")
                .css("background-color","#fff")
                .css("height", imgHeight + "px")
                .css("width", imgWidth + "px");
            $(this).remove();
        });

这基本上用 div 替换了图像，我在其中添加了适当的“box”类。

尽管如此，无论我做什么，页面上的布局都保持不变。怎么了？

谢谢！

4

1 回答 1

2

现在明白了......我不知道我以前怎么没见过这个

这不是 masonry / jQuery 版本的错误

.box在将图像加载到文档中之前，将所有图像包装在 div 中的脚本正在运行。因此，没有选择任何内容，并且当砌体脚本运行时，没有带有box类的元素。

所以，将最后一个脚本移动到正文的末尾

<script type="text/javascript">
            Shadowbox.init();
            $("img.rounded_corners").each(function() {
                $(this).wrap('<div class="box rounded_corners" />');
                var imgSrc = $(this).attr("src");
                var imgHeight = $(this).height();
                var imgWidth = $(this).width();
                $(this).parent()
                    .css("background-image", "url(" + imgSrc + ")")
                    .css("background-repeat","no-repeat")
                    .css("background-color","#fff")
                    .css("height", imgHeight + "px")
                    .css("width", imgWidth + "px");
                $(this).remove();
            });
            var $container=$('#main');
            $container.imagesLoaded(function(){
                $container.masonry({
                    itemSelector : '.box',
                    columnWidth: 200
                });
            });
            </script>
</body> <!-- just above the end of the body. In fact, this is said to be a good practice: leave the external js files in the head, and inline js at the end -->
于 2012-07-15T16:20:15.647 回答