标签: jquery-isotope

使用Isotope插件,我试图实现一个排序系统,通过单击一个项目,通过在单击的项目后定位相同类型的项目来形成组.

Isotope的排序/过滤功能似乎并不是为此目的而设计的,所以我最初的方法是使用.insertAfter重新排列DOM,然后触发'reLayout'.

但是,似乎在初始化之后,DOM顺序不相关,并且没有什么能够破坏和重新初始化Isotope,但这会导致不希望的滚动位置跳转.

(见:http://jsfiddle.net/owenhoskins/r7MgY/10896/)

是否有办法在没有重新初始化的情况下基于DOM结构更新Isotope？

或者,是否可以设想与排序/过滤功能接口以实现此目标？

提前谢谢,欧文

我有一个同位素组合过滤器设置与许多数据过滤器组,每个都有一个休息/显示所有列表项:

<li><a href="#" data-filter="*">Show all</a></li>

是一种重置所有数据过滤器组的方法 - 一个'重置所有'链接？

我目前的javascript是:

        var $container = $('.content ul.sort'),
            filters = {};

        $container.isotope({
          itemSelector : '.dynamic-filter'
        });

        // filter buttons
        $('.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 …

我发现这个jsFiddle http://jsfiddle.net/Yvk9q/9/使用同位素来开始我想要的元素.
我试图在我的页面上复制那个尾声,但它不起作用!

我真的不知道为什么$ elem.hasClass不是一个函数(我承认我之前从未使用过$ elem)
任何人都可以帮我解决这个问题吗？
谢谢!

jQuery(document).ready(function($) {

                var $container = $('#homepage-grid');
                $container.imagesLoaded( function(){
                    $container.isotope({
                        itemSelector: 'article',
                        masonry: {
                            columnWidth: 125
                        },
                        getSortData : {
                            milk : function( $elem ) {
                                var isMilk = $elem.hasClass('milk');
                                return (!isMilk?' ':'');
                            },
                            eggs : function( $elem ) {
                                var isEggs = $elem.hasClass('eggs');
                                return (!isEggs?' ':'');
                            },
                            bacon : function( $elem ) {
                                var isBacon = $elem.hasClass('bacon');
                                return (!isBacon?' ':'');
                            }
                        }
                    });
                });

                var $optionSets = $('#main-nav .option-set'),
                          $optionLinks = …

我在问一个关于同位素的问题

它是jQuery的一个很棒的插件.

我已经玩了一段时间了,但是我不太了解javascript来结合两种Isotope技术,响应同位素和居中的同位素.

我成功地使用了响应式mod并且它工作得很好,除了现在我需要将整个事物集中在一个div中.没有记录中心布局模式以及响应模式,因此我无法使其工作.基本上,中心布局模式的inscructions是:

要使用此mod,请复制演示页面源中的修订方法.

不幸的是,在视图源中有各种各样的javascript事情,我没有足够的javascript经验来挑选它,并将它与我已经工作的响应脚本结合起来.

任何帮助将不胜感激.

一个有我需要的工作实例的网站.

我正在尝试的网站.

我觉得在Firefox中工作得更好.

我花了相当多的时间试图让同位素和延迟加载一起工作.

问题:如果用户向下滚动,则延迟加载有效,但是如果用户使用过滤器,则项目将显示在顶部但图像将不会加载.

这是有同样问题的人,但似乎他修复了它.我尝试了几件事,但仍然无法使其正常工作.

这是讨论https://github.com/tuupola/jquery_lazyload/issues/51

非常感谢你的帮助

我使用的代码如下.

jQuery(document).ready(function($) {
    $('#big_container .media_block img').each(function(index) {
        var item_height = $(this).attr("height");
        $(this).parent().parent().css("height",item_height);
    });
    $('#big_container').isotope({
    itemSelector : '.item',
    layoutMode : 'masonry',
    masonry: {
        columnWidth: 5,
    },
    sortBy : 'date',
    sortAscending : false,
    getSortData : {
        date : function ( $elem ) {
            return $elem.find('.date').text(); // Date format should be [Y-m-d H:i]
        },
        views : function( $elem ) {
            return parseInt( $elem.attr('data-views'), 10 );
          },
        //featured : function ( $elem ) {
        // return $elem.attr('data-featured');
        // …

我有一个砖石同位素网格,有n行,有两个列大小:160px乘160px和320px乘320px我想为每行的第一个和最后一个元素分配不同的样式.我的行可以有4个元素到7个元素.我一直在努力解决这个问题,并想知道是否有可能.

HTML

<div id="grid" style="position: relative; overflow: hidden; height: 960px;"
class="isotope">
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="two_by_two">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_two">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        /> …

我正在使用同位素(v1),并在Pen中的示例后创建了一个搜索字段.

但是,最初它可以工作,如果我过滤同位素库,那么搜索字段就会停止工作.

我相信搜索功能仍然运行只是不过滤库,我不确定如何解决问题.事实上,我不确定究竟是什么问题,因为没有错误被抛出.

这是一个小提琴,有一个工作的例子.

这是搜索,过滤和同位素JavaScript:

var $container = $('.isotope'),
    qsRegex,
    filters = {};

$container.isotope({
  itemSelector : '.element',
  masonry : {
    columnWidth : 120
  },
  getSortData : {
    name : function ( $elem ) {
      return $elem.find('.name').text();
    }
  },
filter: function() {
  return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});

function searchFilter() {
  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
  $container.isotope();
}

// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( searchFilter …

我正在使用isotope.js纯粹是因为它的动画添加/删除元素.

我喜欢动画项目的效果,当被移除的元素淡出时,同时填充被移除元素的位置.

问题是,我的网格元素都是固定的,相同的大小,我不需要任何过滤的东西.我发现同位素有点笨重,可能是因为它的功能广泛.

所以我正在寻找一种替代方案:

• 轻量级
• 华而不实的
• 稳健和生产准备
• 能够优雅地降级

我有一个有近400个元素的同位素画廊(版本2).典型的图库项目如下所示:

<div class="element hybrid a" data-category="hybrid">
    <p class="type">H</p>
    <h2 class="name">Name</h2>
    <p class="strain-info">No Info Available</p>
    <p class="review"><a class="button radius small black review-form-lb" href="#review-form-lightbox">Review</a></p>
</div>

例如,当我运行下面的代码时,基本上为单击的元素添加了一个类,元素需要几秒钟才能放大.

$container.on( 'click', '.element', function() {
  $( this ).toggleClass('large');
  $container.isotope('layout');
});

另一个例子是,如果我有一个按钮组,其中包含几个筛选库的选项,则需要几秒钟.过滤JS:

$('#filters').on( 'click', '.button', function() {
  var $this = $(this);
  // get group key
  var $buttonGroup = $this.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = $this.attr('data-filter');
  // combine filters
  var filterValue = '';
  for ( var prop in …

有没有办法通过点击事件显示滚动显示的所有项目？ 或许揭示所有功能？

问题:

我正在使用滚动显示以及同位素.同位素的分选功能与滚动揭示反应奇怪.

当我点击"过滤器"按钮时,我正在调用同位素功能过滤器.

 $grid.isotope({filter: '.fish-filter'}); // example

但是,如果我在点击所述文件管理器按钮后向下滚动,我的网格中就会出现漏洞,我必须在通过滚动显示所有项目后"重新点击"按钮

谢谢!!

更新

我在这里添加了布局调用 - 这至少修复了之前存在的漏洞:

window.sr = ScrollReveal({
    beforeReveal: function (domEl) {
        //$grid.isotope( 'layout'); // fixes holes
    },
    afterReveal: function (domEl) {
        $grid.isotope('layout');
    }
});

然而 - 新过滤的物品没有"淡入",因为它们与滚动显示它们"平铺",与同位素的样式一样.理想的情况是显示所有和布局场景 - 这种方式你不能注意到动画中的任何差异 - 或者另一种情况可能只是简单的恒定渐变而不管点击过滤器.

更新更新

我们决定让所有瓷砖都具有相同的高度,以便不再遇到问题.

谢谢