jQuery Isotope 可能是 Chrome 错误吗？

发布于 2024-11-11 17:44:59 字数 1286 浏览 2 评论 0原文

我正在使用 jQuery Isotope 填充多宽度多高度网格上的空格（等比例）。

网格使用 ui-sortable 进行排序，并有一个按钮可以在排序后切换回同位素。有些排序顺序会留下空块。如何使用同位素来填充空格？

我尝试过多种同位素布局方法。

请参阅 http://jsfiddle.net/zdSYG/41/

$(document).ready(function() {

var $itemList = $('#sortable');

    $itemList.isotope({
    resizesContainer: false,
    masonry: {
        rowHeight: 250,
        columnWidth: 325
    }
});

$('#wp-admin-bar-edit').click(function() {
    $itemList.isotope('destroy');

    $itemList.sortable({

        //Do Ajax Stuff with UI-Sort Order
    });

});
});
//Toggle back to Isotope after jQuery UI-Sortable Ajax stuff
$(document).ready(function() {
$('#wp-admin-bar-sort').click(function() {
    $('#sortable').isotope({
        resizesContainer: false,
        masonry: {
            rowHeight: 250,
            columnWidth: 325

        }
    });
});
});

更新：

达到了预期的效果Firefox 4、IE 8 和9 但问题似乎出在 Google Chrome（最新版本稳定通道）上。

Chrome：

在此处输入图像描述

Firefox 4：

在此处输入图像描述

原文

I'm using jQuery Isotope to fill in the spaces on a multi-width multi-height grid (equal proportions).

The grid is sorted using ui-sortable with a button to toggle back to Isotope after sorting. There are some sort orders that leave empty blocks. How can I use Isotope to fill in the spaces?

I've experimented with multiple Isotope layout methods.

See http://jsfiddle.net/zdSYG/41/

$(document).ready(function() {

var $itemList = $('#sortable');

    $itemList.isotope({
    resizesContainer: false,
    masonry: {
        rowHeight: 250,
        columnWidth: 325
    }
});

$('#wp-admin-bar-edit').click(function() {
    $itemList.isotope('destroy');

    $itemList.sortable({

        //Do Ajax Stuff with UI-Sort Order
    });

});
});
//Toggle back to Isotope after jQuery UI-Sortable Ajax stuff
$(document).ready(function() {
$('#wp-admin-bar-sort').click(function() {
    $('#sortable').isotope({
        resizesContainer: false,
        masonry: {
            rowHeight: 250,
            columnWidth: 325

        }
    });
});
});