标签: jquery-isotope

我一直在玩同位素 http://isotope.metafizzy.co/demos/relayout.html 并且一直在尝试创建一个保持固定大小的父容器,总是有6个较小的项目,并重新调整以适应第7个较大的项目.

这是我到目前为止在jsfiddle http://jsfiddle.net/pedalpete/LGBg6/上的内容

我希望会发生的是,在点击任何一个块后,任何一行中较小块的总数将为3.

出于某种原因,无论是用户.isotope('resize'),还是正如我所做的那样求助并重新创建同位素,我最终会在顶行中输入一个大于3的数字,因此这些项目的排序不均匀.

我认为这种安排在诉诸之后会有些不稳定.有没有办法让同位素服从装订盒的宽度和高度参数？

我目前正在使用Isotope来过滤出版物列表,但是希望能够将标准的,记录在案的链接过滤器方法与select元素结合起来,因为我的第二个过滤器列表很长.

我正在努力解决的问题是处理两种不同类型的元素,并将所选值组合成一个选项数组.我可以使过滤器彼此独立工作(下面的代码),但它们需要协同工作.如何将两个不同的操作(单击或更改)和两个属性(class =或value =)组合到一个选项数组中以传递给isotop过滤器？

    var $container = $('#library');
// select ccskills publications by default
$container.isotope({ filter: '.ccskills' });

var $optionSets = $('#library-options .option-set'),
$optionLinks = $optionSets.find('a');

$optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
    return false;
    }
    var $optionSet = $this.parents('.option-set');
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');

    // make option object dynamically, i.e. { filter: '.my-filter-class' }
    var options = {},
    key = $optionSet.attr('data-option-key'),
    value = $this.attr('data-option-value');

    // parse 'false' …

Isotope提供了两个可以提供回调函数的地方:

container.isotope({
    itemSelector: itemSelector,
    layoutMode: 'fitRows',
    onLayout: function() {alert('onLayout callback')}

}, function() {alert('anon callback')});

我不知道这两者之间有什么区别 - 在布局完成后,它们似乎都被称为一次.我查看了文档,但我能找到的只是

与回调类似,onLayout是每次Isotope实例运行其布局逻辑后都会触发的函数.

我正在尝试将元素添加到元素列表的中间.

我尝试使用jQuery insertAfter方法和应用添加它isotope('reLayout').但是,这并没有真正起作用.

  $('#insertAfter a').click(function() {
        var $newEl = $(fakeElement.getGroup()).first();
        $newEl.insertAfter($container.children().eq(3));
        $container.isotope('reLayout');
        return false;
    });

的jsfiddle

任何想法如何使其工作？谢谢

我正在使用WordPress帖子的jQuery Isotope插件.我想在页面加载时显示帖子摘录,然后通过简单地扩展div的高度来显示点击的整个帖子.但是,Isotope插件会在用户单击"Read More"按钮以展开页面之前计算div高度,因此新高度会破坏插件.

我正在玩reLayout方法,但还没有想出来......任何想法？

这是一个有效的链接.尝试"草莓"帖子.http://ashlinixon.com/new-test/index.html

此外,代码示例:

HTML:

<article class="item">
    <div class="featured-img"><img src="images/strawberries.jpg" alt="Strawberries" /></div>
    <h2>Strawberries</h2>
    <p class="excerpt">Lorem ipsum dolor sit amet</p>
    <p class="read-more">Read more</p>
    <div class="post">
        test test<br />test test<br />test test
    </div>
</article>

jQuery的:

$(document).ready(function(){
    $(".post").hide();
    $(".excerpt").show();

    $('.read-more').click(function(){
        $(".post").slideToggle();
        $("#portfolio").isotope( 'reLayout' );
    });            
});

谢谢!:)

早上好,

我有一个关于jQuery插件的问题isotope.

正如你在jsfiddle上看到的那样,我有一个动态布局的网格(你可以点击一个div,大小和布局改变).现在我希望能够items使用jQuerys对其他顺序进行排序sortable.将其添加到代码中:

$container.sortable({
   items: '.item'
});

将使其可拖动,但没有任何可排序的功能.

我究竟做错了什么？

TIA - 最好的问候,frgtv10

我有这个我要过滤的项目列表:

<ul id="container">
    <li class="item filter">This is where I'd put my filters</li>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>

那么我想像这样执行它......

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

...但我想要一个选项ignore: '.filter'.这样的事情是可行的吗？

整个目标是将过滤器放在容器内,采用相同的样式和过渡.

我是Backbone视图的上下文,我在DOM中添加和删除视图.但是,包含Isotope元素的容器仅在初始加载期间起作用; 之后,当容器被移除并再次添加时,Isotope不能按预期工作.

我在这里做了快速的JSfiddle:http: //jsfiddle.net/mulderp/T8aSQ/6/ - >

当我添加Isotope容器时:

var list = '<div data-foo="bar" id="container"><div class="item red"></div><div class="item blue"></div></div>';
$container.html(list);
$container.isotope('shuffle');

同位素不再运行,虽然DOM结构看起来与第一个类似.

任何人都知道会发生什么,以及如何让Isotope在第一次初始化期间读取新元素？

我试图弄清楚它是否可能具有流体同位素布局的方形div.我有一个4列网格,每个div是容器的24%宽度,但我希望这些div是完美的正方形,我无法弄清楚如何实现这一点.
这是一个有效的jsfiddle演示:http ://jsfiddle.net/RJZu6/8/
jQuery:

var $container = $("#main-grid");

var size = function () {
    $container.isotope({
        masonry: {
            columnWidth: $container.width() / 4
        }
    });
}

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: ".grid-block",
        animationEngine: "jquery",
        sortBy: "random",
        resizable: false,
        masonry: {
            columnWidth: $container.width() / 4
        }
    });

    size();
});

$(window).smartresize(size);

CSS:

#main-grid { 
    position: absolute;
    width: 100%;
}

.grid-block { 
    width: 24%; height: 50px; 
    margin-left: 0.25%; margin-right: 0.25%; 
    margin-bottom: 5px; 
    background: no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: …

我很难让我的Isotope插件正常工作.我尝试过很多不同的东西,但现在我已经回到了开始阶段.

我正在使用bootstrap 3,我想要一个可排序的基于网格的新闻部分(如pinterest) - 区别在于我想要两种不同类型的网格宽度.我的默认网格宽度为' col-sm-4 '(相当于33.33333%宽度),然后是'特色'网格宽度'col-sm-8 '.列也将是不同的高度,我希望它们堆叠在彼此之下(如pinterest).

我认为这很简单但是我尝试过的所有东西都可以工作但是在特征网格尺寸下留下了一个大的垂直间隙或完全打破它.

我想知道是否有其他人必须做类似的事情,如果他们设法让它按预期工作.

所以这是同位素工作,如果我的所有网格项都是相同的宽度(工作正常):http: //jsfiddle.net/JR3gu/

当我添加'特色'col-sm-8网格(休息)时会发生这种情况:http: //jsfiddle.net/JR3gu/1/

我尝试过使用这个插件(sloppyMasonry),但也没有太多运气:https: //github.com/cubica/isotope-sloppy-masonry

我的代码:

<div class="container">
  <div class="row">
    <div class="col-md-12">             
      <div class="row iso">
        <div class="col-sm-8 iso-item" style="padding-bottom: 20px;">
          <div class="item">
            <p>The quick brown fox jumped over the lazy dog.</p>
          </div>
        </div>
        <div class="col-sm-4 iso-item" style="padding-bottom: 20px;">
          <div class="item">
            <p>The quick brown fox jumped over the lazy dog.</p>
          </div>
        </div>
        <div class="col-sm-4 iso-item" style="padding-bottom: 20px;">
          <div class="item">
            <p>The quick brown fox …