Question

我正在创建一个砖石风格的图像页面并使用FreeWall脚本。然而，它带来图像的方式似乎是它链接到文件夹 - i/photo/{index}.jpg。我需要它只是img div中的静态#freewall标记，以便我可以对每个图像应用其他一些效果。

我尝试从脚本中复制出img HTML并将其粘贴到div中，但它并没有为砌体效果保留相同的样式。基本上，我只需要调用插件，但就是这样。

您可以在此处查看代码：http://pagedev.co.uk/flex-grid/flex-grid.html

我不熟悉javascript，所以非常感谢任何帮助！我希望这一切都有道理。

这是html：

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/freewall.js"></script>
    <style type="text/css">
        .free-wall {
            margin: 15px;
        }
        .brick img {
            margin: 0;
            display: block;
        }
    </style>
</head>
<body>
    <div id="freewall" class="free-wall"></div>
</body>
</html>

以下是页面上的脚本：

var temp = "<div class='brick' style='width:{width}px;'><img src='i/photo/{index}.jpg' width='100%'></div>";
var w = 1, h = 1, html = '', limitItem = 49;

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,
    cellW: 150,
    cellH: 'auto',
    onResize: function() {
        wall.fitWidth();
    }
});

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

Answer 1

如果要获取变量，则必须将img标记放在HTML文件中。你可以做到，有任何问题。只需将脚本更改为：

(function() {    
    $("#freewall").html(html);

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

    var images = wall.container.find('img');
    wall.fitWidth();
})();

将脚本更改为html

1 个答案: