jquery – 获取Shuffle.js并过滤工作

我很难过.已经设置了砌体部件,但无法理解为什么过滤不起作用.我已经阅读过脚本,与演示网站上的那个相比,我疯了.

我正在使用：https://github.com/Vestride/Shuffle和Bootstrap 3.这可能与Bootstrap无关.

DEMO w / edit：http://jsbin.com/vaquci/1/edit

HTML包含所有依赖项:: jQuery 1.9.1或更高版本,Modernizr等,

HTML

<div class="container">

     <div class="filter-options">
      <button class="btn btn-default" data-group="wallpaper">Wallpapers</button>
      <button class="btn btn-default" data-group="graphics">Graphic Design</button>
      <button class="btn btn-default" data-group="photography">Photos</button>
      <button class="btn btn-default" data-group="3d">3D Renders</button>
    </div>      



<div id="grid" class="row">
    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
       <img src="http://placehold.it/400x534" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x566" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
        <img src="http://placehold.it/400x600" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
        <img src="http://placehold.it/400x504" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
        <img src="http://placehold.it/400x316" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
        <img src="http://placehold.it/400x600" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
        <img src="http://placehold.it/400x594" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
        <img src="http://placehold.it/400x400" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
        <img src="http://placehold.it/400x400" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
        <img src="http://placehold.it/400x796" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x534" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x566" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x600" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x504" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x316" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x600" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x594" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x400" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x400" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x796" alt="" class="img-responsive">
    </div>

          <!-- sizer -->
      <div class="col-xs-6 col-sm-4 col-md-3 shuffle_sizer"></div>          


    </div><!-- /#grid -->
</div><!-- /.container -->

jQuery的：

var shuffleme = (function( $) {
  'use strict';

  var $grid = $('#grid'),$filterOptions = $('.filter-options'),$sizer = $grid.find('.shuffle_sizer'),init = function() {

    // None of these need to be executed synchronously
    setTimeout(function() {
      listen();
      setupFilters();
    },100);

    // instantiate the plugin
    $grid.shuffle({
      itemSelector: '[class*="col-"]',sizer: $sizer    
    });
  },// Set up button clicks
  setupFilters = function() {
    var $btns = $filterOptions.children();
    $btns.on('click',function() {
      var $this = $(this),isActive = $this.hasClass( 'active' ),group = isActive ? 'all' : $this.data('group');

      // Hide current label,show current label in title
      if ( !isActive ) {
        $('.filter-options .active').removeClass('active');
      }

      $this.toggleClass('active');

      // Filter elements
      $grid.shuffle( 'shuffle',group );
    });

    $btns = null;
  },// Re layout shuffle when images load. This is only needed
  // below 768 pixels because the .picture-item height is auto and therefore
  // the height of the picture-item is dependent on the image
  // I recommend using imagesloaded to determine when an image is loaded
  // but that doesn't support IE7
  listen = function() {
    var debouncedLayout = $.throttle( 300,function() {
      $grid.shuffle('update');
    });

    // Get all images inside shuffle
    $grid.find('img').each(function() {
      var proxyImage;

      // Image already loaded
      if ( this.complete && this.naturalWidth !== undefined ) {
        return;
      }

      // If none of the checks above matched,simulate loading on detached element.
      proxyImage = new Image();
      $( proxyImage ).on('load',function() {
        $(this).off('load');
        debouncedLayout();
      });

      proxyImage.src = this.src;
    });

    // Because this method doesn't seem to be perfect.
    setTimeout(function() {
      debouncedLayout();
    },500);
  };      

  return {
    init: init
  };
}( jQuery ));



$(document).ready(function() {
  shuffleme.init();
});

CSS

#grid {margin-left:-5px;margin-right:-5px;position:relative; overflow: hidden;}
#grid [class*="col-"] {padding:5px;}

@media (max-width:320px) {
   #grid [class*="col-"] {width:100%;}
}


.shuffle_sizer {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

解决方法

显然,虽然不在文档中,脚本 http://benalman.com/projects/jquery-throttle-debounce-plugin/也是一个依赖：

所以添加：

http://benalman.com/projects/jquery-throttle-debounce-plugin/

演示：http://jsbin.com/vaquci/2

原文链接：https://www.f2er.com/jquery/178509.html

jquery – 获取Shuffle.js并过滤工作

解决方法

猜你在找的jQuery相关文章