Question

我正在滚动我自己的无数据库照片库（live here），并希望使用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”类添加到。

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

谢谢！

Answer 1

现在明白了......我不知道自己以前怎么看不到这个

它不是砌体/ 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 -->

砌体平原'不工作

1 个答案: