标签: jquery-isotope

我对同位素插件有一个小问题。当我的网页加载时，Isotope 将显示所有元素。我想让它显示一个类别。我怎样才能实现它？

在此先感谢您的帮助！

我对同位素和 WordPress 有疑问。我使用一个简单的脚本，当集成到 WordPress 中时它不起作用。我收到以下错误：

类型错误：$container.isotope 不是函数”。这是代码：

jQuery(function($) {
    /* ISOTOPE */
    var $container = $('.flex-grid');
    $container.isotope({
        itemSelector: '.grid-item',
        percentPosition: true,
        isAnimated: false,
        transitionDuration: 0,
        masonry: {
            columnWidth: '.grid-sizer',
        }
    });
});

该脚本作为最后一个脚本加载到侧页脚中。

我大约一个月前才开始使用 vue，到目前为止我很喜欢它。目前我在使用它时遇到了一些问题isotope.js，一个光滑的过滤/排序/布局库。

问题是isotope想要控制在布局中添加和删除元素（目前用jquery完成）。如果我用 jquery 添加一个项目，vue 不知道该项目的任何功能（寻找事件等），如果我添加视图，同位素不知道排列元素。

我已经在这个 fiddle 中说明了这个问题。请注意，单击从容器中删除一个元素，单击从同位素中删除也会从 vue 容器中删除元素，但反之则不然。单击还会尝试登录到控制台，这当然仅适用于使用 v-for 放入 DOM 的元素。

我找到了一种临时解决方法，可以手动使两者保持同步，但这远非理想。

解决这个问题的惯用方法是什么？显然，我希望能够使用 v-for 来附加和删除项目。是时候制定自定义指令了吗？我从哪里开始？

以这种方式添加元素是一种反模式，但我不知道如何让同位素意识到它们。

add: function(thing) {

  // add to isotope - vue is unaware of the test() fn when it enters the DOM
  this.iso.isotope('insert', $('<span @click="test()" class="thing">' + thing.name + '</span>'))

  // add to vue
  this.things.push({
    name: thing.name
  })
  this.itemName = ""

},

谢谢！

我\xe2\x80\x99m 尝试组合两个同位素过滤功能（通过复选框和快速搜索进行组合过滤），但没有成功。我的尝试在这里： https: //codepen.io/anon/pen/WJvmaj，它是上述功能演示的组合。

目前，搜索设置为 returnsearchResult和checkboxResult，后者在我可以告诉的代码中没有正确定义，这就是我的问题： I\xe2\x80\x99m 不确定要设置什么变量checkboxResultto ，以便它定位复选框过滤返回的\xe2\x80\x99s。

我正在使用 Isotope 对产品页面进行排序、过滤和搜索。到现在为止还挺好。我被困在几个领域。我无法在网上找到包含我需要的确切功能组合的示例，因此需要一些帮助。

简而言之，我有多个选择下拉过滤产品，选择价格排序顺序和快速搜索输入字段。所有的工作，但我有一些需要的修正。

去做：

过滤后搜索不起作用。我需要它与过滤器一起工作。

在价格选择下拉菜单中添加了按“销售”和“新品”排序的功能。

添加 URL 哈希侦听器以创建用于过滤的链接，即首先排序的 New In 链接。

同位素网站

选择示例

URL 哈希示例

快速搜索示例

我当前用于过滤和排序的 JS：

        $(document).ready(function(){

// quick search regex
var qsRegex;
var filterValue;
// init Isotope
var $grid = $(".grid").isotope({
  itemSelector: ".grid-item",
  layoutMode: "fitRows",
  getSortData: {
    price: '.t-price parseInt',
    category: '[data-category]',
  },
  filter: function() {
    var $this = $(this);
    var searchResult = qsRegex ? $this.text().match(qsRegex) : true;
    var selectResult = filterValue ? $this.is(filterValue) : true;
    return searchResult  && selectResult;
  }
});

      // bind filter …

我在页面上有一个基本的照片布局(用于投资组合).有两种不同尺寸的图像砖,较大的图像砖与较小且正好是宽度和高度的两倍成比例,并且块或窗口之间没有边距.只有几个较大的块与几十个较小的块混合在一起.它是一个响应式设计,因此当窗口大小下降到某个宽度以下时,全尺寸网站上的列数为5%,列数为33.333%,所有列都在100%最大宽度容器内.在每块砖内,图像设置为100%宽度和CSS自动高度.我已经包含了一个线框来说明我所描述的内容.

我遇到的问题是让同位素响应流体布局.如果我在比最大宽度宽的窗口中加载页面,它会完全按预期放置块.但是,当我将浏览器窗口缩小到最大宽度以下时,块会开始变得非常不稳定,在某些变体中:堆叠在一列中; 堆叠在两列中,空列之间; 图像之间的差距; 在大图像下留下一个空行.

我可能不是很好地解释自己,但只是想知道是否有人使用具有流畅布局的Isotope并且可能有一些洞察力.

好奇,如果那里的任何人能够改变与jquery Isotope一起使用的CSS3过渡,以使用诸如"transition-delay:0s,1s;"之类的东西来添加延迟项目.

我希望他们先向左移动,然后向下移动,以便在过滤时获得更多数学类型的感觉(而不是默认的"对角线随机播放").似乎对默认css3转换所做的任何更改都不起作用.

这是我目前的CSS:

/**** Isotope Animating ****/
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

任何输入都会很棒!

我正在编写一个显示图像的单页javascript应用程序,一个la pinspire.我正在使用的库是jQuery(1.7.2)和最新版本的同位素.

我试图在应用程序中实现无限滚动.当您滚动到页面底部时,ajax会与服务器通信并返回JSON中的对象数组.这个JSON用于构建几个div,其中包含有关每个图像和图像本身的一些信息.

我将每个div添加到同位素启用的容器中.在我的ajax调用的完整部分中,我称之为同位素("reLayout").这很好用.

我的问题是,添加十几个div导致项目"颤动",然后我希望项目放在最后.我尝试过addItems的各种排列,插入,追加,而不是使用同位素("reLayout")无济于事.

如何使用ajax添加包含图像的项目而不使它们重叠或飘动？

问候,尼克

我有jquery同位素设置,并创建了一些过滤器.当我创建我选择一个过滤器,同位素做一个很好的小动画.我想在动画结束时触发警报.

此示例演示了发生的动画:

http://isotope.metafizzy.co/demos/filtering.html

有任何想法吗？

以下是点击过滤器的代码:

$('.filter').on( 'click', 'a', function( event ) {
        event.preventDefault();
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
            return false;
        }

        // console.log('hello world');
        var $optionSet = $this.parents('.option-set');
        var group = $optionSet.attr('data-filter-group');
        options.comboFilters[ group ] = $this.attr('data-filter-value');
        $.bbq.pushState( options );

        // COUNT
        var $filtered = $('#isotope-container').data('isotope').$filteredAtoms;
        // get count of all filtered item
        alert($filtered.length);
        // get count of all filtered items that match a selector
        //$filtered.filter('.blue').length;
  });

对于那里的所有jQuery heros,我需要帮助!(再次)

我在互联网上发现了类似的问题,但到目前为止还没有答案: - /

我想用jquery同位素过滤一堆物品.我从插件主页调整了组合过滤器示例,它工作正常,看起来像这样:

$(function () {
var $container = $('#container'),
    filters = {};
$container.isotope({
    itemSelector: '.item',
    filter: '',
});

// filter links
$('.filter a').click(function () {
    var $this = $(this);
    // don't proceed if already selected
    if ($this.hasClass('selected')) {
        return;
    }

    var $optionSet = $this.parents('.option-set');
    // change selected class
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');

    // store filter value in object
    // i.e. filters.color = 'red'
    var group = $optionSet.attr('data-filter-group');
    filters[group] = $this.attr('data-filter-value');

    // convert object into array
    var isoFilters = …