具有扩展div的自适应网格布局

Question

我正在寻找一种自适应网格类型布局，它将在展开div时排列网格框。我不希望它在网格中留下空格。我有下面的代码和图片来试图说明这一点。

fiddle给出了一个很好的例子，说明我试图阻止它做什么。如果你点击＆＃39; a＆＃39;它看起来还不错。如果你点击＆＃39; b＆＃39;或者＆＃39; c＆＃39;它会产生空白区域。

以下简单代码：

$('.list-item').on('click', function (e) {
    if ($(this).hasClass('open')) {

        $(this).removeClass('open');

        if ($(this).hasClass('list')) {
            $(this).animate({
                height: 10
            }, 0);
        } else {

            $(this).animate({
                height: 150
            }, 0);
            $(this).animate({
                width: 250
            }, 0);
        }

    } else {
        $(this).addClass('open');

        if ($(this).hasClass('list')) {
            $(this).animate({
                height: 330
            }, 0);
        } else {
            $(this).animate({
                height: 340
            }, 0);
            $(this).animate({
                width: 520
            }, 0);
        }
    }
    e.preventDefault();

});

$('.list-view').on('click', function (e) {
    if ($(this).hasClass('open')) {
        $(this).removeClass('open');
        $('.list-item').removeClass('list');
        $('.list-item').animate({
            height: 150
        }, 0);
        $('.list-item').animate({
            width: 250
        }, 0);


    } else {
        $(this).addClass('open');
        $('.list-item').addClass('list');
        $('.list-item').animate({
            height: 10
        }, 0);

        $('.list-item').animate({
            width: 960
        }, 0);

    }
    e.preventDefault();
});

我的小提琴代码并不是最干净的。我在这里缺少的另一个组件是我希望一次只能扩展一个div。如果展开一个div并且用户单击另一个div，我希望展开的div缩小。

感谢您的想法和帮助。