Question

""http://www.yawer.net/test-portofolio/" rel="no follow" >这个是我的示例代码:

当我点击任何过滤器链接时,布局会被打破。

我使用 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>

J 查询

<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>

我横跨响应性设计, 需要根据您的布局修改它, 并更改分类和 ids 。确保与 html 中呼叫的 html 和 jQuery 中所使用的。 # filter ul. gallery 等, 关闭所有标签, 这个系统没有显示关闭 & lt; / ul>

友情链接