标签: jquery-isotope

我正在使用 jQuery 同位素插件，并且希望在页面加载时仅显示来自特定组的项目。目前所有项目都显示：

http://aproposstudio.com/category/work/

例如，在上面的链接中，有没有办法加载显示“壁画”的页面？

谢谢。

我有一个同位素项目,当有人在里面评论时它会增长.当它生长时,我如何告诉主同位素容器随之生长？现在正在发生的事情是,随着同位素项的增长,同位素容器保持它在调用$(".home_main")时设置的初始高度.同位素(); 因此,当我在同位素项中留下注释时,项目会增长,然后被主容器切断.谢谢.

我已经看到你可以设置,resizesContainer: true但这对我没有帮助.谢谢.

不确定它是否有任何区别,但我也尝试使用Masonry jquery插件(看起来非常相似)并且遇到了同样的问题.

我在相同的页面中使用同位素过滤器和无限滚动插件,因此这两者都不能完美地工作,一些设计问题反映了同位素jQuery文件.当我在滚动中单击更多按钮时,它会更好地发布,但未正确放置.它落后于旧职位.我现在还无法找到解决方案.如果有任何人有同样的问题,并发现任何想法,请随时回答我的问题.

这是我的同位素过滤器的jQuery函数

$(function(){

    // Orginal function by Alien51
    var $container = $('#container');
    $container.isotope({
    masonry: {
      columnWidth: 80
    },
    sortBy: 'number',
    getSortData: {
      number: function( $elem ) {
        var number = $elem.hasClass('element') ? 
          $elem.find('.number').text() :
          $elem.attr('data-number');
        return parseInt( number, 10 );
      },
      alphabetical: function( $elem ) {
        var name = $elem.find('.name'),
            itemText = name.length ? name : $elem;
        return itemText.text();
      }
    }
  });
        var $optionSets = $('#options .option-set'),
      $optionLinks = $optionSets.find('a');

  $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already …

使用同位素,通过zonear扩展perfectMasonry

到目前为止看起来它运作良好,我想知道是否有人知道如何集中容器.尝试用css没有运气.原始同位素以砖石为中心

任何人？谢谢

>>更新<<

新同位素(v2)已经出局,它使用名为packery的布局模式完成 "完美砌体"位.新的同位素版本也是中心砖石/同位素.但我实际上并没有使用,fitWidth因为我只是使用bootstrap和同位素应用在顶部以在布局开始时获得居中的砌体(对于那种用途,不对中过滤tho,为此fitWidth)

如果JavaScript被禁用,是否有jQuery同位素的后备？

假设我在那里使用了fitColumns属性,如果禁用了JavaScript,那么是否会回退到该布局样式,就像你在新的myspace中所拥有的那样 .
出现在您的myspace主页上的初始帖子将被正确设置样式,但是当您进一步滚动时不会加载其他帖子.
什么样的CSS结构或后备方法可以用于这种情况？

ajax取出的正常同位素使用正在起作用.看工作jsfiddle.

同位素与懒惰通过ajax取不起作用.看问题jsfiddle.

问题: lazyload不会触发并继续显示灰色图像.

用于lazyload设置的javaScript:

$(document).ready(function () {
    //
    // initialize at ready ;
    //
    $container.isotope({
        itemSelector: '.box',
        columnWidth: function (containerWidth) {
            return containerWidth / 12;
        },
        onLayout: function () {
            $win.trigger("scroll");
        }
    });
    //
    // here i will be using data through api
    // For now I am defining json manually
    // var json is defined at top of this code 
    // considering json return was success
    //$.getJSON(APIURL, function (json) {
    var newElements = ""; …

我正在尝试在 WordPress 安装的新闻部分实施同位素过滤。我是 JavaScript / jQuery 的新手，正在努力学习。我首先使用Isotope 网站过滤器部分提供的代码。

运气不好，我开始谷歌搜索。在 Stack Overflow 上，我发现用 wordpress 实现同位素过滤组合看起来很有希望，但没有回应。然后我找到了Implementing jQuery isotope。我想，哇，好吧，同样的问题。回答。伟大的。

......但我的兴奋很快变成了更加沮丧。经过几个小时的修修补补，我仍然坐在这里，没有任何东西可以展示。

我的简单问题是，我做错了什么/遗漏/不理解？

预先感谢您的帮助，健忘詹姆斯

HTML 输出

<div id="grid_page">
<ul id="isotope_filters">
    <li><a data-filter="*" href="#">show all</a></li>
    <li><a data-filter="event-planning" href="#">event planning</a></li>
    <li><a data-filter="marketing" href="#">marketing</a></li>
    <li><a data-filter="site-survey" href="#">site survey</a></li>
</ul>

<ul id="isotope_container">
    <li class="isotope_selector event-planning marketing">
        <a href="./link-1/"></a>
        <div class="caption">
            ...
        </div>
    </li>
    <li class="isotope_selector site-survey">
        <a href="./link-2/"></a>
        <div class="caption">
            ...
        </div>
    </li>
    <li class="isotope_selector event-planning marketing">
        <a href="./link-3/"></a>
        <div class="caption"> …

我正在使用此代码运行带有RTL支持的Isotope

$.Isotope.prototype._positionAbs = function( x, y ) {
  return { right: x, top: y };
};

$('.portfolio-isotope').each(function() {
    var layoutMode = $(this).attr('data-layoutmode');
    if(!layoutMode || layoutMode === ""){
        layoutMode = 'fitRows';
    }

    $(this).isotope({
        transformsEnabled: false,
        itemSelector: '.portfolio-element',
        layoutMode : layoutMode,
        transitionDuration : '0.8s'
    });

});

出于某种原因,我得到浏览器返回JavaScript错误

Uncaught TypeError: Cannot read property 'prototype' of undefined

可能是什么原因？

我正在尝试在Isotope下获得一堆包含大量内容的主页

将每个哈希更改显示为Google Analytics中的综合浏览量.最初,我打算将此作为事件,但它确实应该是网页浏览.

所以我设置了修改后的GA:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-X', {'allowAnchor': true});
ga('send', 'pageview', { 'page': location.pathname + location.search + location.hash});

在Google Analytics中,如果有人访问特定的网址,我会立即看到哈希标记 - 例如:http://www.example.com/#pet-health 如果他们重新加载页面,我会在GA中看到哈希,但是如果他们点击Isotope"nav"链接进入它.如果他们点击,我只是看到"/"

在同位素射击中,我所拥有的似乎没有起作用:

//Sets up filtering on click of Isotope navigational elements 
    $('#isotopeFilters a, .subnav a, #isotopeContainer .isotopeNav a, .page-template-page-home-php #logo').click(function(){
        var selector = $(this).attr('data-filter');
        var prettyselector = selector.substr(1);
        ga('send', 'pageview', location.pathname+location.search+location.hash);

        location.hash = prettyselector;

        $('#isotopeFilters a, .subnav a').removeClass('active');
        $('a[class="' + prettyselector + '"]').addClass('active');

        $container.isotope({ 
            filter: selector,
            itemSelector: '.item',
            masonry: …

我正在使用同位素来过滤具有多个过滤器的列表,其中基于某些过滤器的组合可能不会显示任何项目.在这种情况下,我想向用户显示一条消息,根据他们的过滤器参数,不存在任何结果.我该怎么做呢,同位素是否有内置的东西来处理这个问题？这是一个jsfiddle的例子.如果没有项目符合过滤器设置,则应显示...

http://jsfiddle.net/cssguru/e4vA3/

   $(function(){

   var $container = $('#container'),
      $checkboxes = $('#filters input');

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

   $checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join('');
    $container.isotope({ filter: filters });
   });

   });