0

これは私のコード例です:

フィルター リンクをクリックすると、レイアウトが壊れます。

私は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;
}
4

1 に答える 1

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>

私はレスポンシブ デザイン全体で 4 を行っています。レイアウトに従ってこれを変更し、クラスと ID を変更する必要があります。html で呼び出されたものと jQuery で使用されたものを結び付けてください。#filter ul.gallery などを使用し、すべてのタグを閉じてください。

于 2012-06-19T18:50:04.453 に答える