ShuffleJS无法上手

Question

我无法找到这个库的最新示例项目或指南，到目前为止我所做的工作（不起作用）在这里：https://jsfiddle.net/k3g5xtyh/我错过了什么？提前谢谢。

var Shuffle = window.shuffle;
var element = document.getElementById('grid');
var sizer = element.querySelector('.my-sizer-element');

var shuffle = new Shuffle(element, {
  itemSelector: '.picture-item',
  sizer: sizer // could also be a selector: '.my-sizer-element'
});

Answer 1

让我们以最简单的方式编码。您可以通过运行show code snippet

来切换Run code snippet而不是执行脚本

var Shuffle = window.shuffle;
var element = document.getElementById('grid');

var shuffle = new Shuffle(element, {
  itemSelector: '.picture-item'
});

addFilterButtons()

function addFilterButtons() {
  var options = document.querySelector('.filter-options');

  if (!options) {
    return;
  }

  var filterButtons = Array.prototype.slice.call(
    options.children
  );

  filterButtons.forEach(function(button) {
    button.addEventListener('click', handleFilterClick.bind(this), false);
  });
};

function handleFilterClick(evt) {
  var btn = evt.currentTarget;
  var isActive = btn.classList.contains('active');
  var btnGroup = btn.getAttribute('data-group');
  var filterGroup;
  removeActiveClassFromChildren(btn.parentNode)
  if (isActive) {
    btn.classList.remove('active');
    filterGroup = Shuffle.ALL_ITEMS;
  } else {
    btn.classList.add('active');
    filterGroup = btnGroup;
  }

  shuffle.filter(filterGroup);
};

function removeActiveClassFromChildren(parent) {
  var children = parent.children;
  for (var i = children.length - 1; i >= 0; i--) {
    children[i].classList.remove('active');
  }
};

.aspect {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}
.aspect__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.aspect--16x9 {
  padding-bottom: 42%;
}
.picture-item {
  height: 100px
}
.picture-item__inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #dac;
}
.col-3\@sm {
  width: 33%;
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  box-sizing: border-box;
}
.col-6\@sm {
  width: 60%;
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/4.0.2/shuffle.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-6@sm">
      <div class="filter-options btn-group">
        <button class="btn" data-group="photography">Photography</button>
        <button class="btn" data-group="wallpaper">Wallpaper</button>
        <button class="btn" data-group="3d">3D</button>
      </div>
    </div>
  </div>
  <div id="grid" class="row my-shuffle-container">
    <figure class="col-3@sm picture-item" data-groups='["photography"]' data-date-created="2010-09-14" data-title="Baseball">
      <div class="picture-item__inner">
        <div class="aspect aspect--16x9">
          <div class="aspect__inner">
            <img src="https://pbs.twimg.com/profile_images/2311298181/80d154u80lijwyufmcb6.png" alt="" height="145" width="230">
          </div>
        </div>
        <figcaption>Baseball, [photography]</figcaption>
      </div>
    </figure>
    <figure class="col-3@sm picture-item" data-groups='["wallpaper","3d"]' data-date-created="2011-08-14" data-title="Tennis">
      <div class="picture-item__inner">
        <div class="aspect aspect--16x9">
          <div class="aspect__inner">
            <img src="https://pbs.twimg.com/profile_images/2311298181/80d154u80lijwyufmcb6.png" alt="" height="145" width="230">
          </div>
        </div>
        <figcaption>Tennis, [wallpaper, 3d]</figcaption>
      </div>
    </figure>
    <figure class="col-3@sm picture-item" data-groups='["wallpaper","3d"]' data-date-created="2009-05-27" data-title="iMac">
      <div class="picture-item__inner">
        <div class="aspect aspect--16x9">
          <div class="aspect__inner">
            <img src="https://pbs.twimg.com/profile_images/2311298181/80d154u80lijwyufmcb6.png" alt="" height="145" width="230">
          </div>
        </div>
        <figcaption>iMac, [wallpaper, 3d]</figcaption>
      </div>
    </figure>

  </div>
</div>