按顺序随机排列图像

Question

我有各种尺寸的图像列表，我必须在页面中显示所有图像。我想以这样的方式排列它们，即在线上的图像和下一行的图像之间不显示空白区域。无论如何，我可以使用CSS和Javascript实现这一点，??

以下是jsFiddle上的示例。

http://jsfiddle.net/zHxPT/1/

Answer 1

如果您愿意让图像相互重叠，那么使用客户端代码动态定位项目之间的差距最小：

window.onload = function() {
    var oList = document.getElementById("liParent")
    var arrItems = oList.getElementsByTagName("li");
    var totalWidth = parseInt(oList.style.width, 10);
    var curLeft = 0;
    var curTop = 0;
    var arrHeights = new Array();
    var colIndex = 0;
    for (var i = 0; i < arrItems.length; i++) {
        var oCurItem = arrItems[i];
        var oImage = oCurItem.getElementsByTagName("img")[0];
        oCurItem.style.position = "absolute";
        var curWidth = oImage.offsetWidth;
        var curHeight = oImage.offsetHeight;
        if (curLeft + curWidth > totalWidth) {
            curLeft = 0;
            colIndex = 0;
        }
        if (colIndex < arrHeights.length)
            curTop = arrHeights[colIndex];
        oCurItem.style.left = curLeft + "px";
        oCurItem.style.top = curTop + "px";
        arrHeights[colIndex] = (curHeight + curTop);
        curLeft += curWidth;
        colIndex++;
    }
}

更新了jsFiddle：http://jsfiddle.net/zHxPT/2/

Answer 2

你看过jquery吗？

使用CSS，您可以将元素的边距和填充设置为0.然后使用javascript作为数组，获取一个随机数并将该索引写入页面。

Answer 3

加载图像（如果需要，在隐藏的div中），然后找到最高的图像，并为所有图像提供相同的高度。那样下一行就没有间隙了（然后显示div）

例如