Question

This是我的示例代码：

当我点击任何过滤器链接时，布局就会中断。

我使用isotope插件，这是我的jquery代码。

JSS 标记：

$(function(){
$('.fancygallery-panel').wrapAll('<div id="isotopeCont" />');


$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $('#isotopeCont').isotope({ 
  filter: selector ,
  animationEngine:'best-available'
  });

  return false;
});

})

CSS 标记：

/**** Isotope filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}


.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

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

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

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

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

Answer 1

$(document).ready(function(){
$('.fancygallery-panel').wrapAll('<div id="isotopeCont" />');


$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $('#isotopeCont').isotope({ 
  filter: selector ,
  animationEngine:'best-available'
  });

  return false;
});

})

我不是jQuery专家，但你不需要在那里准备文件吗？我使用列表项上的类以及活动状态来设置同位素。这是我的代码。

过滤器的HTML

<div id="filter">
            <ul>
                <li><a href="" title="*">All</a></li>
                <li><a href="" title="test1">1</a></li>
                <li><a href="" title="test2">2</a></li>
                <li><a href="" title="test3">3</a></li>
                <li><a href="" title="test4">4</a></li>
                <li><a href="" title="test5">5</a></li>
                <li><a href="" title="test6">6</a></li>
            </ul>
        </div>

列表项目库

<ul class="gallery simple" data-current="">
<li class="test5">
<a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery"  title=""><span class="hover"></span><img src="image.jpg"/></a>
</li>
<li class="test6">
<a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery"  title=""><span class="hover"></span><img src="image.jpg"/></a>
</li>
<li class="test5">
<a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery"  title=""><span class="hover"></span><img src="image.jpg"/></a>
</li>
<li class="test3">
<a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery"  title=""><span class="hover"></span><img src="image.jpg"/></a>
</li>
<li class="test1">
<a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery"  title=""><span class="hover"></span><img src="image.jpg"/></a>
</li>
<li class="test2">
<a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery"  title=""><span class="hover"></span><img src="image.jpg"/></a>
</li>

JQuery的

<script src="PATHTOYOURJSDIR/jquery.isotope.min.js"></script>

        <script type="text/javascript">

        $(document).ready(function(){
        var $container = $('ul.gallery');
    var toFilter = '*';

    $container.isotope({
        filter: toFilter,
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    $container.attr('data-current',toFilter);

    checkActive();

    $('#filter a').click(function(){
        var title = $(this).attr('title');
        var text = $(this).text();
        if(text == "All"){
            var selector = title;
        }
        else {
            var selector = "." + title;
        }

        $container.attr('data-current',selector);

        $container.isotope({ 
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        checkActive();

        return false;
    });

    function checkActive(){

    $('#filter a').each(function(){

        $(this).removeClass("current");

        var title = $(this).attr('title');

        title = '.'+title;

        if(title=='.*'){
            title = '*';
        }


        var currentCat = $container.attr('data-current');

        if(title==currentCat){
            $(this).addClass("current");
        }

    });


    }

var $container = $('ul.gallery')
// initialize Isotope
$container.isotope({
  // options...
  resizable: false, // disable normal resizing
  // set columnWidth to a percentage of container width
  masonry: { columnWidth: $container.width() / 4 }
});

// update columnWidth on window resize
$(window).smartresize(function(){
  $container.isotope({
    // update columnWidth to a percentage of container width
    masonry: { columnWidth: $container.width() / 4 }
  });
});

// trigger isotope again after images have loaded
$container.imagesLoaded( function(){
  $(window).smartresize();
});


});
        </script>

我正在做四个响应式设计，您必须根据您的布局修改它并更改类和ID。确保与html中调用的那些结合到jQuery中使用的那些.. #filter ul.gallery等，并关闭所有标签，这个系统没有显示结束＆lt; / ul＆gt;

用同位素插件破坏布局

1 个答案: