css 按顺序随机排列图像

7xllpg7q  于 2023-04-08  发布在  其他
关注(0)|答案(3)|浏览(151)

我有一个各种大小的图像列表,我必须在一个页面中显示它们。我想以这样一种方式排列它们,即在oneline和下一行的图像之间不显示白色。无论如何,我可以使用CSS和Javascript实现这一点,??
下面是jsFiddle上的示例。
http://jsfiddle.net/zHxPT/1/

svujldwt

svujldwt1#

如果你想让图像彼此重叠,你可以使用客户端代码来动态定位项目,使它们之间的间隙最小化:

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/

bpzcxfmw

bpzcxfmw2#

你看过jQuery吗?
使用CSS,你可以将元素的边距和填充设置为0。然后使用JavaScript作为数组,获取一个随机数并将该索引写入页面。

ubof19bj

ubof19bj3#

载入图片(如果需要的话,在一个隐藏的div中),然后找到最高的,并给予所有的图片相同的高度。这样就不会有到下一行的间隙(然后显示div)
举个例子

相关问题