Question

我目前正在尝试使用jQuery，JavaScript和HTML动态创建表。在我的应用程序中，图像是动态的。

** CASE：**如果9个图像动态出现，那么必须有3行3列，如果有16个图像，那么4行4列，依此类推。如果是奇数图像，我也想要一些解决方案（例如：17,19,91..etc）。我搜索了很多，但我没有得到正确答案。我不是在寻找插件。

Answer 1

同样，我不确定这是否是您想要的，因为您的问题含糊不清，没有人知道您的标记是什么样的，或者您是如何获得图像但我想其中一个解决方案可能是类似的这样：

$(document).ready(function(){
   var count = $("#container img").size();
   var columns = Math.sqrt(count);
   columns = parseInt(columns);        
    $("#container img").css('width', $("#container").width() / columns);

});

想法是获取图像的数量，找到该数字的平方根，然后简单地设置图像的宽度以适应容器。（如果你有25个图像，你将有5列，图像宽度将是容器宽度的1/5）。

再次不知道这是否符合您的需求，但这是我要去的方向。

Answer 2

这是另一种假定图像固定的可能性。这意味着随着图像数量的增加，您可能会越过页面的边缘。也许没关系。

http://jsfiddle.net/C4WpQ/14/

enter image description here

function createImages (n)
{
    var images = [];
    for (i = 0; i < n; i++)
    {
        var imageUrl = "http://images.fake.com/" + i + ".png"; 
        images.push(imageUrl);
    }
    return images;
}

function leastSquareRoot (n)
{
    // maybe use ceil if you want a wider rectangle vs a taller one 
    // when a square is not possible
    var sr = Math.sqrt(n);
    return Math.floor(sr);
}

function createRowsAndCols (images, width)
{
    var result = "<table>\n";
    var lsr = leastSquareRoot(images.length);    
    for (i = 0; i < images.length; i++)
    {
        if (i % width == 0)
        {
            result += "\t<tr>\n";
        }

        result += "\t\t<td><img src=\"" + images[i] + "\"></td>\n";

        if (i % width == width - 1 || i == images.length - 1)
        {
            result += "\t</tr>\n";
        }
    }
    result += "</table>\n";
    return result;
}

function showTags(markup)
{
    return markup.replace(/\</g, '&lt;').replace(/\>/g, '&gt;');
}

$( document ).ready(function() {
    $("#canvas").html("Creating images...");
    var images = createImages(17);
    $("#canvas").append(" created " + images.length + " images.<br/>");
    var width = leastSquareRoot(images.length);
    $("#canvas").append("The proposed width is " + width + ".<br/>" );
    var result = createRowsAndCols(images, width);
    $("#canvas").append(result);
    $("#canvas").append("<pre><code>" + showTags(result) + "</code></pre>");
});

根据编号创建行和列。动态的图像

2 个答案: