是否有一个 jQuery 插件可以允许 div 列的洗牌？ [关闭]

Question

我有 4 个 div，它们在一个页面中创建 4 行。在每一行中，有 4 个方形 div，所以基本上我们有一个 4 x 4 的 (16) 个方形 div 块。

当用户将鼠标悬停在 div 上时，高度会动态更改为 +40px。现在，这会调整父容器的高度，从而将下面的行向下推。

我想要的是能够只下推调整后元素正下方的元素。

设置

<div class="row">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>
<div class="row">
    <div class="element"></div>
    <div class="element blue"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>
<div class="row">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>
<div class="row">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

http://jsfiddle.net/zW53T/1/

期望的影响

然后，当调整蓝色元素的大小时，会发生以下行为（用 css 破解以展示所需的行为）：

http://jsfiddle.net/dYnLn/1/

这可能吗？我想可能是在使用砖石时，但我很少使用砖石，甚至不知道从哪里开始。

任何建议/指针将不胜感激。

Answer 1

您可以使用Shuffle.js

示例：

$(document).ready(function() {
  var $grid = $('#grid'),
      $sizer = $grid.find('.shuffle__sizer');

  $grid.shuffle({
    itemSelector: '.picture-item',
    sizer: $sizer
  });
});

随机播放可用的选项：

// Overrideable options
Shuffle.options = {
    group: 'all', // Filter group
    speed: 250, // Transition/animation speed (milliseconds)
    easing: 'ease-out', // css easing function to use
    itemSelector: '', // e.g. '.picture-item'
    sizer: null, // sizer element. Can be anything columnWidth is
    gutterWidth: 0, // a static number or function that tells the plugin how wide the gutters between columns are (in pixels)
    columnWidth: 0, // a static number or function that returns a number which tells the plugin how wide the columns are (in pixels)
    delimeter: null, // if your group is not json, and is comma delimeted, you could set delimeter to ','
    buffer: 0, // useful for percentage based heights when they might not always be exactly the same (in pixels)
    initialSort: null, // Shuffle can be initialized with a sort object. It is the same object given to the sort method
    throttle: $.throttle || null, // By default, shuffle will try to throttle the resize event. This option will change the method it uses
    throttleTime: 300, // How often shuffle can be called on resize (in milliseconds)
    sequentialFadeDelay: 150, // Delay between each item that fades in when adding items
    supported: Modernizr.csstransforms && Modernizr.csstransitions // supports transitions and transforms
};

Answer 2

抱歉，我还没有正确设置边距，但您可能想尝试使用绝对定位，即时更改（以列为基础）：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/dYnLn/5/

/* layout a single column based on element heights */
function layoutColumn(col) {
    var top = 0;
    $('.row').each(function () {
        var $row = $(this);
        var left = 0;
        var $cell = $row.children().eq(col);
        $cell.css({
                top: top
            });
        top = top + $cell.outerHeight() + ~~$cell.css("margin-top");
    });
}

/* layout the columns horizontal positions */
var top = 0;
$('.row').each(function () {
    var $row = $(this);
    var left = 0;
    /* set the horizontal positions */
    $row.children('.element').each(function () {
        var $cell = $(this);
        $cell.css({
            left: left
        });
        left += $cell.outerWidth() + ~~$cell.css('margin-left');
    });
    top = top + $row.outerHeight();
});

/* Layout all the columns */
for (var col = 0; col < $('.row').first().children().length; col++)
{
    layoutColumn(col);
}

$('.element').on('mouseenter', function(){
    $(this).addClass('blue').addClass('larger');
    layoutColumn($(this).index());
}).on('mouseleave', function(){
    $(this).removeClass('blue').removeClass('larger');
    layoutColumn($(this).index());
});

布局代码显然可以简化，但我将其快速放在一起，作为如何使用 jQuery 进行动态布局的示例。