标签: jquery-isotope

我正在使用Metafizzy的Isotope JS插件(v2.0.1)来过滤出版物库,我正在使用多个过滤器(例如出版商和行业).有没有办法检查我的过滤器组合是否导致零结果,然后显示相应的消息...类似"抱歉.找不到匹配的项目".

所以我正在使用同位素masonry布局

$('section').isotope({itemSelector:'article',layoutMode:'masonry',transformsEnabled: false, animationEngine: 'jquery',masonry:{columnWidth:8}});

问题是,如果我没有设置articlein css 的高度,布局看起来不是很好,项目重叠和东西,但我不能为元素设置固定的高度,因为它们是博客帖子,可以改变大小,你们有任何关于如何解决这个问题的提示吗？

我在这里使用jQuery同位素放了一些东西.. http://jsbin.com/eziqeq/6/edit

它似乎一般工作,但在第一次加载时,新选项卡,Isotope插件将包装元素的高度设置为0.如果我刷新页面它确实工作并根据的设置父元素的高度里面找到的物品.

任何帮助将不胜感激.我想不出为什么关闭这第一次加载这是不起作用,并在后续重新加载它是..除非它可能与缓存它加载的图像有关？

编辑 -

这是Webkit浏览器中的缓存问题,因为它适用于Firefox和工作选项卡,当我清除缓存并刷新页面时,它将无法再次刷新.

我有一个有近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');
    }
});

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

更新更新

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

谢谢

在Firefox中,没有问题.这是一张图片:

http://cl.ly/3R0L1q3P1r11040e3T1i

在Safari中,文本渲染效果不佳:

http://cl.ly/0a1101341r2E1D2d1W46

在IE7和IE8中,它更糟糕,但我没有图片.对不起:(

我正在使用Isotope jQuery插件,而CSS3过渡似乎导致了糟糕的字体渲染.

我也在使用Google Font API.

以下是Isotope的CSS转换编写为:

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}

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

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

我很感激任何帮助.在Firefox中看起来很棒!

谢谢!

我正在尝试将Modernizr添加到此页面:http://www.alternativeradio.org/pages/test.Modernizr工作正常,并在本网站的其他页面上工作.但是在这个使用jQuery Isotope的页面上,添加:

<script src="http://cdn.shopify.com/s/files/1/0070/7142/t/1/assets/modernizr.custom.js?128259" type="text/javascript"></script>

到HEAD导致出现两个Javascript错误:

.   Uncaught TypeError: Object #<Object> has no method 'addTest' jquery.isotope.min.js:11
.   Uncaught TypeError: Object [object Object] has no method 'isotope' free-downloads:2151

我试过通过Modernizr.load加载jquery.isotope.min.js,但无济于事.我错过了什么？谢谢!

我正在遇到一个令人难以置信的问题,只有firefox中的同位素插件.我的每个同位素元素都有一个textarea,当我向下滚动到底部并键入其中一个textareas时,屏幕会跳到顶部.我在jsfiddle中重现了这个:

http://jsfiddle.net/galtschul/WfTZ5/

我一直在看这个几个小时,无法弄清楚是什么导致这个卷轴甚至开火.会爱一些帮助!

谢谢!

我在工作中有一个看似简单的博客项目,我正在尝试将Isotope Jquery(用于布局/过滤/排序),Infinite Scroll以及通过Ajax动态加载所有博客摘录(所以过滤和排序是在用户向下滚动页面之前应用于所有摘录(在此之后,它们被加载到dom然后可访问)).

这个问题主要涉及通过Ajax获取博客文章摘录数据,然后传递给Isotope过滤代码.我不确定这样做的最佳方法,但我目前正在尝试使用ajax请求遍历每个页面(博客文章摘录),然后作为一个整体访问数据.

我遇到了两种不同的方法来遍历ajax请求,每个请求使用then whenjquery语句.第一个是在这个SO答案中使用方法,另一个是简单地将整个then when语句放在一个$.each语句中.

方法1:

  var pageCount = 15;
  var pageCountArray = [];
  for (var i = 1; i != pageCount; ++i) pageCountArray.push(i);

  var deferreds = [];
  $(pageCountArray).each(function() {
    var pageNumber = this;
      deferreds.push(
        $.get('/page/' + pageNumber)
      )

    $.when.apply($, deferreds)
      .then(function(data){
        console.log(data); 
        // this outputs data as a string from the first page, then a list of objects
        console.log(typeof(data));
        // string
        // 13 - object …

我使用jquery-match-height来匹配同位素布局的网格项内部div的高度,这在同位素网格加载时非常有效.

但是,当我过滤网格时,matchheight脚本不再处理div,每个div都返回其原始高度.

我试过了:

  $grid.on( 'arrangeComplete', function() { 
   console.log("OK, arrangeComplete");
   $.fn.matchHeight._update();
   //$('.card-text').matchHeight(); //Here I tried simply re-initiating... no effect
  });

我也尝试过:

if (!$grid.data('isotope').filteredItems.length ) {
 $.fn.matchHeight._update();
}

我根本无法获得匹配高度"refire"