Jquery 砌石素ol'；不起作用

我正在滚动我自己的无数据库照片库（），并希望使用砖石来布局缩略图，而不需要太多的空白（尽管这更像是我网站上的“灰色空间”）

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

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();
        });

$（“img.圆角”）。每个（函数（）{
$（此）.wrap（“”）；
var imgSrc=$（this.attr（“src”）；
var imgHeight=$（this）.height（）；
var imgWidth=$（this）.width（）；
$（this.parent（））
.css（“背景图像”、“url”（+imgSrc+））
.css（“背景重复”，“不重复”）
.css（“背景色”，“#fff”）
.css（“高度”，imghight+“px”）
.css（“宽度”，imgWidth+“px”）；
$（this.remove（）；
});

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

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

---

谢谢

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

这不是砌体/jQuery版本的错误

在将图像加载到文档中之前，包装

.box

div中所有图像的脚本正在运行。所以，没有选择任何内容，当脚本运行时，没有包含

box

class的元素

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

<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 -->

Shadowbox.init（）；
$（“img.圆角”）。每个（函数（）{
$（此）.wrap（“”）；
var imgSrc=$（this.attr（“src”）；
var imgHeight=$（this）.height（）；
var imgWidth=$（this）.width（）；
$（this.parent（））
.css（“背景图像”、“url”（+imgSrc+））
.css（“背景重复”，“不重复”）
.css（“背景色”，“#fff”）
.css（“高度”，imghight+“px”）
.css（“宽度”，imgWidth+“px”）；
$（this.remove（）；
});
var$container=$（“#main”）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.box”，
栏宽：200
});
});

如果你删除了第二个JS代码，砖石工程就可以了？我已经在控制台打开的情况下检查了你的页面，砖石工程插件抛出了一个错误哦，好吧。。。错误是什么？在：l.style.marginTop=“1%”，k.appendChild（l）中第1670列第9行抛出的错误；从第9行第0列开始打电话知道这是什么意思吗？插件代码本身怎么会有错误呢？啊！好的，所以现在它似乎在工作，除了它所做的只是把所有的东西都塞进一列，而不是像它应该做的那样把东西放出来。。。知道为什么会发生这种情况吗？A现在，经过一两次刷新后，正在加载一组图像。我看到他们正在加载源代码，但不是在屏幕上。。。因此，如果我将“圆角”函数移到页面底部，似乎会出现问题。我已将圆角图像代码移回顶部，但随后砌体再次停止工作…只是出于好奇，砌体是否需要包装div？你不能直接把它应用到图像上吗？老实说，我不确定。但是我需要它来处理圆角代码。让我试试看。