Question

我有4个div，在页面中创建4行。在每个行中，有4个方格，实际上我们有一个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
  });
});

Shuffle提供的选项：

// 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动态布局的一个例子。

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

2 个答案:

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