Расположение изображений в случайном порядке

Question

У меня есть список изображений разных размеров, и я должен показать их все на странице. Я хочу расположить их таким образом, чтобы между изображениями oneline и изображением на следующей строке не было пробелов В любом случае я могу добиться этого с помощью 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

Загрузите изображения (в скрытом div, если необходимо), затем найдите самое высокое и присвойте всем изображениям одинаковую высоту.Таким образом, в следующей строке не будет пробела (и затем отобразится div)

Например

Answer 3

Вы смотрели в jquery?

С помощью CSS вы можете установить поля и отступы элементов равными 0. Затем используйте JavaScript в качестве массива, получите случайное число и запишите этот индекс на странице.