Question

所以，我正在测试这个名为freewall.js的精彩jquery插件。但是，只有在调整页面大小后，它才能正常工作。

在第一次加载时，这些块看起来彼此太靠近了。在页面上稍微调整大小并且vo！它很完美。

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

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

编辑：代码很简单，一旦文档准备就绪，就会触发绑定到resize处理程序的代码，在你的情况下，整个wall thingy与它绑定。因此，一旦所有内容都启动并运行，javascript所做的第一件事就是调用代码，插件在后面做了奇迹。很高兴我能提供帮助。

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

1 个答案: