Автоматическое управление сеткой jQuery/javascript

Question

Я реализую страницу загрузки файла jquery. Пока пользователь добавляет файлы, я хочу, чтобы они попадали в виде значков в автомасштабируемой сетке.

Автомасштабируемый означает, что он обеспечивает максимальное пространство для размещения элементов. Когда есть два объекта - это woud выглядеть (я знаю, что я должен будет обрабатывать изменения размера изображений себя):

Когда несколько добавлены:

Есть ли " grid control "(возможно, jquery), который, по крайней мере, близок к тому, что мне нужно для определения размера?

Answer 1

Прежде всего, пожалуйста, имейте в виду, что я новичок JQuery, и это мой первый пост на Stackoverflow :)

Я такая же проблема, и я пытаюсь это исправить с помощью JQuery и CSS. Это мой тег тела тегов:

<div id="controls"> 
Controls: 
    <button id="add">+</button> 
    <button id="del">-</button> 
Current ratio: 
    <span id="value"></span> 
    <button id="increase">+</button> 
    <button id="decrease">-</button> 
Referred to: 
    <form style="display: inline;"> 
     width<input type="radio" name="maximize" value="width"> 
     height<input type="radio" name="maximize" value="height"> 
    </form> 
</div> 
<div id="elements" style="width: 500px; height: 300px; background: black;"> 
</div> 
<script> 
ratio  = 1; 
ratioWidth = true; 
function autoresize() { 
    boxes = $('#elements').children().size(); 
    rows = Math.ceil(Math.sqrt(boxes/ratio)); 
    columns = Math.ceil(boxes/rows); 
    if (!ratioWidth) { 
     tmp  = rows; 
     rows = columns; 
     columns = tmp; 
    } 
    $('#elements').children().css('width', 100/rows+'%'); 
    $('#elements').children().css('height', 100/columns+'%'); 
} 
function add() { 
    red = Math.floor(Math.random()*256); 
    green = Math.floor(Math.random()*256); 
    blue = Math.floor(Math.random()*256); 
    color = 'rgb('+red+','+green+','+blue+')'; 
    $('#elements').append("<div style=\"background: "+color+"; float: left;\"></div>"); 
    autoresize(); 
} 
function update() { 
    $('#value').text(ratio); 
    autoresize(); 
} 
function remove() { 
    $('#elements').children().last().remove(); 
    update(); 
} 
function increase() { 
    ratio++; 
    update(); 
} 
function decrease() { 
    if (ratio > 1) { 
     ratio--; 
     update(); 
    } 
} 
$(document).ready(function() { 
    $('#add').click(add); 
    $('#del').click(remove); 
    $('#increase').click(increase); 
    $('#decrease').click(decrease); 
    if (ratioWidth) value = 'width' 
    else value = 'height' 
    $('input[type=radio]').filter('[value='+value+']').attr('checked', true); 
    $('input[type=radio]').live('change', function() { 
     if ($(this).val() == 'width') ratioWidth = true 
     else ratioWidth = false; 
     autoresize(); 
    }); 
    update(); 
    //$(window).bind("resize", autoresize); 
}); 
</script> 

Вы можете удалить информацию о цвете фона и поместить значки в эти поля. Если вы нашли лучший способ, если вы улучшить этот код, пожалуйста, дайте мне знать :)

Edit 1 - Я добавил некоторые Math.floor(...) удалить ошибку, когда коробки сторона имеет повторяющиеся decilmals: очень размер является простое целое число. Теперь размеры берутся из контейнера div, я использую черный цвет фона для основного контейнера, и я заметил небольшую проблему: иногда я вижу черную рамку рядом с маленькими ящиками, даже если я не устанавливаю никакого цвета фона. Может ли это быть ошибкой рендеринга Firefox?

Редактировать 2 - Теперь можно установить, если вы предпочитаете автоматическое расширение по горизонтали, по вертикали или ни одному из них. Я попытался написать лучший код, и я прокомментировал автоматизацию при изменении размера окна (используйте его, только если в вашем контейнере нет фиксированной высоты/ширины). Я думаю, что теперь ему нужна опция отношения, чтобы указать, если ширина, например, должна быть в два раза длиннее. Живой пример: http://experimental.frafra.eu/maxarea2.html

Редактировать 3 - Новый код! Лучшее графическое представление и новый параметр: ratio. Соотношение представляет собой коэффициент между отношением между шириной/высотой основного контейнера и элементами. Прямой эфир: http://experimental.frafra.eu/maxarea3.html