标签: jquery-isotope

我开始在我的项目中使用awsome JQuery Isotope插件.一切都很好,但我有一个问题与corner-stapm选项.

我的masnory网格中的每个元素都有固定宽度(220px + 5边距)和随机高度(取决于其内容),我在CSS文件中使用@media查询来更改不同屏幕分辨率上的列数(页面宽度可以是230,460 ,690 ......等).

拐角印章的问题出现在最窄的版本(一列) - 角落印章覆盖着同位素元素......

在此演示中的同位素官方页面上也出现同样的问题:http://isotope.metafizzy.co/custom-layout-modes/masonry-corner-stamp.html(当窗口缩小时,大红色矩形隐藏在其他同位素元素后面) .

我发现它可以在Masnory插件演示站点中正常工作! http://masonry.desandro.com/demos/corner-stamp.html

我已经结合将网站脚本从Masnory复制到Isotope,但没有运气,因为我对JS/jQuery不太擅长:/

让它在Isotope中工作会很棒,因为我希望我的网站有过滤选项(在Masnory插件中不可用).

我正在使用Metafizzy的Isotope插件并将其设置为使用如下所示的选择菜单进行过滤:http://jsfiddle.net/trewknowledge/jJZEN/

    $(function() {

    var $container = $('#container'),
        $select = $('#filters select');

    $container.isotope({
        itemSelector: '.item'
    });

    $select.change(function() {
        var filters = $(this).val();
;
        $container.isotope({
            filter: filters
        });
    });

});?

我想弄清楚的是,当filter文件已被使用时,我将如何向所选元素添加一个高亮/活动类.

让我们说我想过滤颜色(红色,黄色或蓝色)和尺寸(小,中或大)和材料(羊毛,棉,丝).我将有三套复选框.如果用户选中"红色"复选框和"中"复选框,我希望Isotope显示红色和中等的项目.到目前为止,没问题.但是,如果用户检查红色和黄色复选框以及中型和大型复选框以及羊毛和丝绸复选框,该怎么办？现在我希望Isotope显示的是((medium OR large) AND (red OR yellow) AND (wool OR silk)).

构建一个jQuery选择器字符串以适应这种情况对我来说似乎很复杂,特别是如果有几十个组,每个组包含几十个选项.

仅使用jQuery,我可以执行以下操作:

$('.medium, .large').filter('.red, .yellow').filter('.wool, .silk');

但是如果我只需要构建整个选择器一次以将其完全形成传递给Isotope,我将不得不这样做:

`.medium.red.wool, .medium.red.silk, .medium.yellow.wool, .medium.yellow.silk, .large.red.wool, .large.red.silk, .large.yellow.wool, .large.yellow.silk`

如您所见,从三个组中选择了两个项目,我的选择器中有2 ^ 3个以逗号分隔的字符串.现在假设我有六个过滤组:

Color (red, blue, yellow, green, purple, black)
Size (tiny, small, medium, biggish, large, extra-large)
Price (very-cheap, cheap, medium, expensive, very-expensive, extraordinarily-expensive)
Material (cotton, wool, satin, linen, felt, wood, iron)
Type (archer, hunter, wizard, mage, spy, druid)
Popularity (not-popular, mildly-popular, somewhat-popular, medium-popular, quite-popular, very-popular)

让我们说用户检查每组中的前五个选项.我的选择器字符串必须包含5 ^ 6个以逗号分隔的字符串,每个字符串包含六个术语.如果每个术语平均5个字符,用5个字符.分隔它们,那么我将有5 ^ …

是否可以限制同位素中的条目数量？目前我正在调整Isotope的表格式数据结构,我正在添加动态排序.

它的方式 - 我有一定数量的HTML条目(暂时10).它们按时间添加排序.当用户选择某种排序时,数据库中可能存在与所请求的参数匹配的其他条目,但它们未被加载.所以我使用jQuery插入符合用户排序请求的元素

$.get('myfile.php?request=something', function(callback) {
    var $newItems = $(callback);
    $('.container').isotope( 'insert', $newItems );
    $('.container').isotope({ sortBy : USER_SORT });
});

所有这一切都很完美,我唯一的问题就是我添加了更多的元素(我希望保留一定数量的可见条目).我可以做一个解决方法,并限制我的容器和设置的高度overflow: hidden;,但我也实现垂直无限滚动(当你滚动到底部更多的条目被添加).所以这需要不断管理容器本身,在我看来应该有更好的方法来做到这一点？

另一种方法是添加新元素,进行排序,然后从底部删除不需要的条目,但这将是非常糟糕的,因为用户将看到过滤和动画的其他数据,然后删除.

所以我的问题..有没有办法限制同位素本身的条目？或者也许有人更好地了解如何限制它们？

谢谢

我正在尝试使用jQuery UI的本机sortable选项制作一个可以排序的项目表,以及使用Isotope插件(此处)基于某些条件进行排序.

这是我的小提琴:http://jsfiddle.net/SA5yh/4/.正如您将发现的,此处Isotope工作正常,单击按钮确实按预期排序.但是jQuery UI sortable不起作用,你可以拖动它,但一旦发布,它就会返回原来的位置.没有isotope使用,它正常工作,如预期:http://jsfiddle.net/SA5yh/5/.任何想法我如何使两者都工作？

我已经看到很多关于这个的问题,没有答案(至少没有一个帮助过我).

我的设置非常简单 - 一个带有图像的流体容器(没有固定宽度).

我已经在CSS中设置了每个div项目将是25%并且我已经在其中设置图像以填充div.

我已经将同位素设置为仅在imagesLoaded之后运行.

问题是在初始加载时,元素没有正确定位.它们之间有一些填充物,甚至可以从容器中取出.只有当我调整窗口大小时,它们才能正确定位,即使我将窗口恢复到全屏.

你知道为什么会这样吗？

这是我的代码:

HTML:

<div id="main">
   <div class="item"><img src="http://lorempixel.com/300/200/"></div>
   <div class="item"><img src="http://lorempixel.com/440/300/"></div>
   <div class="item"><img src="http://lorempixel.com/450/560/"></div>
   <div class="item"><img src="http://lorempixel.com/410/270/"></div>
   <div class="item"><img src="http://lorempixel.com/440/230/"></div>
   <div class="item"><img src="http://lorempixel.com/470/460/"></div>
   <div class="item"><img src="http://lorempixel.com/400/200/"></div>
   <div class="item"><img src="http://lorempixel.com/430/780/"></div>
   <div class="item"><img src="http://lorempixel.com/400/520/"></div>
   <div class="item"><img src="http://lorempixel.com/420/120/"></div>
   <div class="item"><img src="http://lorempixel.com/500/260/"></div>
   <div class="item"><img src="http://lorempixel.com/200/200/"></div>
   <div class="item"><img src="http://lorempixel.com/100/200/"></div>
   <div class="item"><img src="http://lorempixel.com/400/200/"></div>
   <div class="item"><img src="http://lorempixel.com/890/200/"></div>
   <div class="item"><img src="http://lorempixel.com/400/200/"></div>
   <div class="item"><img src="http://lorempixel.com/400/200/"></div>
</div>

CSS:

#main{margin-right:250px;}
#main .item { width: 25%;}
#main .item img { width:100%;height:100%;}

JS:

var $container = …

我正在尝试使用packery作为我的画廊的布局.我正在使用fancybox与同位素画廊.我不认为fancybox是个问题.

我正在使用isotope v2和最新的packery下载.每一个其他布局都可以工作,甚至不包括在像fitRows和fitColumns这样的同位素js中.但随着包装我从同位素得到这个错误:

未捕获错误:无布局模式:packery isotope.pkgd.js第8行

以下是codepen的示例:http://codepen.io/anon/pen/QwXEvr

JS:

jQuery('.fancybox').fancybox({
        openEffect: 'none',
        closeEffect: 'none'
    }); 

$('#testing').isotope({
   'layoutMode': 'packery';
  'itemSelector' :'.item';
});

我正在尝试getSortData用于同位素.我使用数据属性作为排序号.它工作正常,而我的数据属性低于10.仅适用于0-9数字.在这个例子中,我显示了我的代码,其中最后一项具有数据顺序12. Isotope将其用作1并错误地排序.

这是我的HTML:

<div class="isotope">
    <div data-order="0" class="box"></div>
    <div data-order="1" class="box"></div>
    <div data-order="2" class="box"></div>
    <div data-order="12" class="box"></div>
</div>

这是JS:

$grid = $('.isotope');
$grid.each(function(index, el) {
    $(this).isotope({
        itemSelector : '.box',
        layoutMode : 'masonry',
        masonry: {
            gutter: 20,
            isFitWidth: true
        },
        getSortData: {
            category: '[data-order]'
        },
        sortBy : 'category'
    });

});

我正在使用 jquery 同位素来过滤结果，如下所示：

      <div class="isotope">
      <div class="filter-item">1</div>
      <div class="filter-item">2</div>
      <div class="filter-item">3</div>
      </div>

JS代码：

      <script>
      $( function() {
      var $container = $('.isotope');
      if ( !$container.data('isotope').filteredItems.length ) {
      $container.html("Sorry.No result");
      }
      </script>

我正在尝试显示 - 消息，如果在过滤过程中没有结果。但它不起作用，有什么线索吗？

I used the isotope from the site http://isotope.metafizzy.co/ and implemented a method to use load more items by pressing a button. The problem is that when i hide the elements to display only the initial number of elements, my isotope grid won't scale. If i press the show more button, the layout accurately scales.

It seems that

  $grid.isotope('hideItemElements', $(this)).isotope('layout');

but

 $grid.isotope('revealItemElements', $(this)).isotope('layout');

效果很好。你能告诉我我在做什么错吗？

这是Codepan中的一个演示：http ://codepen.io/laura-chesches/pen/RKPWGo