Question

我正在实现一个jquery文件上传页面。当用户添加文件时，我希望它们以可自动调整大小的网格中的图标形式列出。

自动调整大小意味着它为包含元素提供了最大空间。当有两个对象时 - 它看起来像（我知道我将不得不自己处理图像大小调整）：

two items js grid

添加多个时：

several items js grid

是否有一个“网格控件”（或许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>

您可以移除背景颜色，并将图标置于这些框的中心位置。如果您找到更好的方法来改进此代码，请告诉我：）

编辑1 - 我添加了一些Math.floor(...)来删除当盒子方面有重复的decilmals时的错误：非常大小是一个简单的整数。现在尺寸是从容器div中取出的，我使用黑色作为主容器的背景颜色，我注意到一个小问题：有时我看到小方框附近有黑色边框，即使我没有设置任何背景颜色。它可能是Firefox渲染故障吗？

编辑2 - 现在可以设置您是希望水平，垂直还是全部自动展开。我试着写一个更好的代码，并且我在窗口调整大小时评论了自动调整大小（仅当你的容器盒没有固定的高度/宽度时才使用它）。我认为现在它需要一个比率选项，以指定宽度是否必须长两倍，例如。实例：http://experimental.frafra.eu/maxarea2.html

编辑3 - 新代码！更好的图形表示和新参数：ratio。比率是主容器宽度/高度与元件之间的比率之间的系数。实例：http://experimental.frafra.eu/maxarea3.html

一个jQuery / javascript自动调整大小的网格控件

1 个答案: