把脚本改成html答案

【问题标题】：Changing script into html把脚本改成html
【发布时间】：2015-08-06 08:31:43
【问题描述】：

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

我试图从脚本中复制出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();
});

【问题讨论】：

标签： javascript jquery html freewalljs

【解决方案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();
})();

【讨论】：

我想完全删除 var temp 行。如果可能的话，我只想在我的 div 中包含。然后只需调用底部的插件即可。抱歉很难解释
我想为图像添加一个灯箱功能，并管理它们的内容，因此希望能够看到代码，而不是通过脚本引入它们。
我试过了，效果不一样。它与我上面的链接不适合图像。我现在在 div 中得到了这个：
placehold.it/350x150" width="100%">
抱歉，在没有工作应用程序的情况下进行这样的更改是很困难的，如果您不熟悉使用 Javascript 则更是如此。我觉得值得你先学一点 JS