javascript - freewall.js 插件仅在调整大小后工作

Question

所以，我正在测试这个名为 freewall.js 的很棒的 jquery 插件。 它似乎工作得非常好，但是，只有在调整页面大小之后。

在第一次加载时，方 block 看起来彼此靠得太近，而且一团糟。在页面上稍微调整一下，瞧!太完美了。

这是我正在使用的代码(由示例文件提供，似乎在他们的服务器上运行良好):

<script type="text/javascript">
        var temp = "<div class='brick' style='width:{width}px;'><img src='{index}.gif' width='100%'></div>";
        var w = 1, h = 1, html = '', limitItem = 10;
        for (var i = 0; i < limitItem; ++i) {
            w = 1 + 3 * Math.random() << 0;
            html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1);
        }
        $("#freewall").html(html);

        var wall = new Freewall("#freewall");
        wall.reset({
            selector: '.brick',
            animate: true,
            gutterY: 15,
            gutterX: 15,
            cellW: 150,
            cellH: 'auto',
            onResize: function() {
                wall.fitWidth();
                }
        });



        var images = wall.container.find('.brick');
        images.find('img').load(function() {
            wall.fitWidth();
        });
    </script>

这是 css 样式:

        <style type="text/css">
        body {
            background-color: #557f9d;
            font-size: 13pt;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 15pt;
            font-weight: 300 !important;
            color: #fff;
            letter-spacing: -0.025em;
            line-height: 1.75em;
        }

        .free-wall {
            margin: 0px;
        }
        .brick img {
            margin: 0;
            display: block;
        }
    </style>

这是有问题的页面:

Example page

提前致谢!

Answer 1

试试这个:

$(document).ready(function() {
   $(document).resize();
});

编辑:代码很简单，一旦文档准备就绪，它就会触发绑定(bind)到调整大小处理程序的代码，在您的情况下，整面墙都与它相关联。因此，一旦一切启动并运行，javascript 做的第一件事就是调用代码，插件在后面发挥作用。很高兴我能提供帮助。