Isotope with Vuejs

Same code with jQuery converted to Vuejs to initialise and show demo

by amitavroy

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<div class="container" id="app">
  <div class="row">
    <div class="col-sm-12">
      <h1>Isotope module {{message}}</h1></div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <div class="grid">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
        <div class="grid-item">Item 5</div>
        <div class="grid-item">Item 6</div>
      </div>
    </div>
  </div>
</div>

CSS

.grid-item {
  width: 20%;
  min-height: 90px;
  border: 1px solid red;
  margin-bottom: 5px;
  margin-right: 5px;
}

.grid-item--width2 {
  width: 50%;
}
.grid-item--width3 {
  width: 70%;
  border: 1px solid blue;
}

JavaScript

var isotopeFeature = (function() {
	var settings = {};

  var init = function(options) {
  	settings.gridItem = _.has(options, 'gridItem') ? options.gridItem : '.grid-item';
    
    settings.double = _.has(options, 'double') ? options.double : 'double';
    
    randomWidth2();
    setupIsotope();
  }

  var setupIsotope = function() {
    var elem = document.querySelector('.grid');
    var iso = new Isotope(elem, {
      itemSelector: settings.gridItem,
      layoutMode: 'fitRows'
    });
  }

  var randomWidth2 = function() {
    $(settings.gridItem).each(function() {
      if (randomBoolean()) {
        $(this).addClass(settings.double);
      }
    });
  }

  var randomBoolean = function() {
    items = Array(5, 1, 2, 3, 5, 1, 2, 3, 4, 5, 1, 2, 5);
    var item = items[Math.floor(Math.random() * items.length)];
    if (item % 5 == 0) {
      return true;
    }
    return false;
  }

  return {
    init: init
  }
})();

const app = new Vue({
  el: '#app',
  data: {
  	message: 'This'
  },
  created () {
    isotopeFeature.init({
      gridItem: '.grid-item',
      double: 'grid-item--width2'
    });
  }
});