垂直对齐的div使用jQuery

Question

我一直在做这个了几个小时，我只是无法弄清楚，

比方说，我有很多的div与左右浮动，与jQuery draggable重视他们的话，他们的位置在不断变化的所有时间。

现在，我希望能够给空间出来垂直，所以每个格之间的空间是相同的，最大的问题之一是，每一个div的高度也不断变化。

每次我试图把事情做对，我只是写〜100行代码，我只是迷失在混乱中，也许有一些简单的方法来做到这一点，顺便说一下，我这里是它的样子，我没有包括任我编写的代码，因为它并没有多大意义。

http://jsfiddle.net/M6PmM/

Answer 1

这是有趣的，看看你的问题的不同解释。当我觉得垂直对齐的，我想，Adobe Illustrator中的，以及如何可以均匀地间隔开了一些选择的形状。为此，你可以使这样的事情：

注：本可以很容易地适合于保持元件之间形成均匀的间隙，无论其个人的高度。

$('.align').click(function() {

    // Cache the elements
    var $obj = $('.obj');

    // Sort them by offset top
    $obj = $obj.sort(function(a, b) {
        return $(a).offset().top - $(b).offset().top;
    });

    // Get get the offset of the first and last elements
    // NOTE that we included the last element's height... you may need to tweak it
    // here due to CSS borders adding to the height
    var firstOffsetTop = $obj.first().offset().top;
    var lastOffsetTop = $obj.last().offset().top + $obj.last().height();

    // The new container height is the difference between the first,
    // and last element's position
    var containerHeight = lastOffsetTop - firstOffsetTop;

    // Determine the gap between each element, based on the height of the container
    // divided by the number of elements
    var spacing = containerHeight / $obj.length;

    // Assign top properties
    $obj.each(function(i, el) {
        $(this).css('top', (i * spacing) + firstOffsetTop + 'px');
    });

});

Answer 2

晚，但，这可能是另一种方法做：

$('.align').click(function(){

    var t = 0;
    var dist = 10;

    $('.obj').each(function(i,e){

        t += $('.obj').eq(i-1).height() + dist;

        $(this).animate({

            left: $('.container').offset().left + dist,
            top: t

         }, 500);

    });

});