Question

我让Isotope顺利运行，但似乎以不可预测的方式重置了可变大小的类值 - 至少据我了解它是如何工作的。
我的基本结构：页面顶部有一排按钮，A-Z类=字母。每个按钮都会加载一组新的div。

$(".letter").click(function() {
    if ($('.'+letX+'').length > 0 ) { // divs already loaded
    var newItems = $('.'+letX+''); // letX grabbed from div ID, a, b, etc.
    $(this).find('#container').after(newItems); // loads fine, should hold width2 height2 set on very first load
    }
    else {
    var stringData = $.ajax({ url: 'digz/index/'+$(this).attr("id")+'.txt', async: false }).responseText;
        var $newItems = $(stringData);
            $('#container').isotope( 'insert', $newItems );
    $('.element').each(function(index) {
        $(this).find('.titlePE').before('<p class="number">' + index + '</p>'); // add numbers for variable-sizes
    });
    variableSizes(); // new divs so set random width2 height2
    }
});

我为variableSizes设置了一个函数，以帮助我更清楚一些。宣布为上述..

function variableSizes() {
$container.find('.element').each(function(){ // add randomish size classes
    var $this = $(this), number = parseInt( $this.find('.number').text(), 10 );
//$this.removeClass('width2').removeClass('height2');
//$('.element').removeClass('width2').removeClass('height2');
// if ( !($this).hasClass('sized') ) {
    if ( number % 7 % 2 === 1 ) {  $this.addClass('width2'); } // $('div .nameP').html('wide');
    if ( number % 3 === 0 ) {  $this.addClass('height2'); }
//  $this.addClass('sized'); // }
    });
}

这是标准的同位素例程我的修复是尝试修复。哦，我看到我遗漏了if（$（this）.hasClass（'sizes'））测试的代码但是，我点击了可变尺寸按钮（它为已经设置的（随机）width2 height2添加了一个预先类。然后我点击g =漂亮的布局。然后h = nice，然后d，nice，然后g再次=废话。它主要设置在width2 height2或一些设置在height2。

我在这里错过了一个过程。如何重复点击g - 或d或...以保持随机设置的width2 height2？它甚至不必是可预测的，让我们面对它这只是金光闪闪，但它应该保持某种“好”。有什么建议吗？

Answer 1

您编写上述逻辑的方式，它将贯穿所有元素并在将项目添加到Isotope后调整其大小的。

当您更改Isotope正在使用的东西的大小时，您必须重新运行其中一个布局例程。

您可以使用layout：


.isotope（'layout'，$ items，callback）

在布局中定位指定的项目元素。

布局将仅定位指定的元素，并且这些元素将位于布局的末尾。而reLayout将所有元素放在Isotope小部件中。

或reLayout


.isotope（'reLayout'，callback）

重置布局属性并布置每个项目元素。

取决于您希望的行为：

在同位素上调用variableSizes()之前，请先调用insert传递新的元素列表。

在调用variableSizes()
后运行上述布局例程之一
以下示例中variableSized()的优点是您的variableSizes()函数中不必具有任何条件逻辑。它只会调整传入的内容。

以下是使用＃1的简化 Demo Fiddle （点击'Rnd'随机化所有内容）：

代码：

var fakeResults = { '.a': [], '.b': [], '.c': [] }; for (var key in fakeResults) { for (var i = 0; i < 20; ++i) { fakeResults[key].push(key + i); } } $(".letter").click(function () { var $this = $(this); var filter = $this.data('filter'); /* Click on Rnd to randomize sizes */ if($this.text() === "Rnd") { variableSizes($('.element')); $container.isotope('reLayout'); return; } if ($('#container ' + filter).length === 0) { var newItems = $.map(fakeResults[filter], function (ele, idx) { return $('<div/>').addClass('element') .addClass(filter.split('.').slice(-1).join('')) .text(ele)[0]; }); /* Call variableSizes before 'insert' or see below comment */ variableSizes($(newItems)); $container.isotope('insert', $(newItems)); /* This will work as well */ //variableSizes($(newItems)); //$container.isotope('reLayout'); } }); function variableSizes($newItems) { $newItems.removeClass('width2').removeClass('height2'); $newItems.each(function(idx, ele) { var $this = $(this), number = Math.floor(Math.random() * (20))+ 1; if (number % 7 % 2 === 1) { $this.addClass('width2'); } if (number % 3 === 0) { $this.addClass('height2'); } }); }

如果使用上面的＃2并且你想避免随机化已经大小的元素，你可以只传入新元素，或者，如果由于某种原因你无法跟踪新元素，则为已经大小的元素添加一个标记类元件。

这个版本的variableSizes()会这样做。它找到容器中没有sized类的所有元素：

Demo Fiddle

function variableSizes2() { $items = $container.find('.element:not(.sized)'); $items.addClass('sized'); $items.each(function(idx, ele) { var $this = $(this), number = Math.floor(Math.random() * (20))+ 1; if (number % 7 % 2 === 1) { $this.addClass('width2'); } if (number % 3 === 0) { $this.addClass('height2'); } }); }

jquery Isotope在添加新div时变量大小不可预测

1 个答案: