freewall.js 插件仅在调整大小后才有效答案

【问题标题】：freewall.js plugin works only after resizefreewall.js 插件仅在调整大小后才有效
【发布时间】：2016-06-28 14:35:32
【问题描述】：

所以，我正在测试这个很棒的 jquery 插件，叫做 freewall.js。但是，它似乎完全可以正常工作，但只有在调整页面大小之后。

在第一次加载时，这些块看起来太靠近了，而且非常混乱。在页面上稍微调整大小，瞧！太完美了。

这是我正在使用的代码（由示例文件提供，在他们的服务器上似乎可以正常工作）：

<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

提前致谢！

【问题讨论】：

Nous avons les chats : 我们有猫吗？（标题）您是否尝试过准备好文档：Document.resize()？
是的，我们有猫。这是一个测试页面的笑话标题。无论如何，如果我错了，请纠正我，因为我是菜鸟。但据我所知， Document.resize() 会简单地调整窗口大小吗？我觉得这会有点侵入性。就个人而言，我讨厌网站与我的浏览器或类似的东西混淆。
在文档上调用调整大小只会触发发生调整大小时编写的代码。在你的情况下，会解决整个事情。
哦，你标题上的评论是因为我是法国人我想知道哈哈

标签： javascript jquery html css freewalljs

【解决方案1】：

试试这个：

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

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

【讨论】：

完美运行！！非常感谢！
太棒了！当你说它只有在我调整窗口大小后才有效时，我知道这很简单:)