0

我的 Isotope 运行平稳，但它似乎以不可预测的方式重置可变大小的类值 - 至少据我了解它是如何工作的。
我的基本结构：页面顶部的一排按钮，AZ 类=字母。每个按钮加载一组新的 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'); // }
    });
}

这是标准同位素程序。
我的 rems 是尝试修复。哦，我看到我遗漏了 if($(this).hasClass('sized')) 测试的代码
但是发生的事情是我单击了可变大小按钮（它将一个预类添加到已经设置的（随机) width2 height2。然后我点击 g = nice layout。然后 h = nice，然后 d，nice，然后 g 再次 = 废话。它主要设置在 width2 height2 或一些只是 height2。

我在这里遗漏了一部分过程。如何获得重复单击 g - 或 d 或...以保持随机设置的宽度 2 高度 2？它甚至不必是可预测的，让我们面对现实吧，这只是金光闪闪，但它应该保持某种“不错”。
有什么建议吗？

4

1 回答 1

0

按照您编写上述逻辑的方式，它将遍历所有元素并在将项目添加到 Isotope后调整它们的大小。

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

您可以使用layout：

.isotope('布局', $items, 回调)

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

layout 只会定位指定的元素，这些元素将定位在布局的末尾。而 reLayout 将定位 Isotope 小部件中的所有元素。

或者reLayout

.isotope('reLayout', 回调)

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

根据您想要的行为，您可以：

  1. 在调用IsotopevariableSizes()之前调用传递您的新元素列表。insert
  2. 调用后运行上述布局例程之一variableSizes()

以下示例的优点是您的函数variableSized()中不必有任何条件逻辑。variableSizes()它只会调整传入的内容。

这是Demo Fiddle使用上面＃1的简化（单击“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');
        }
    });
}
于 2013-09-15T23:29:56.827 回答