Help with what code does

Hello people,

I am trying to figure out how to use Isotope and Wordpress! So far I am quite lost but managed to get a simple page kind of working for Isotope!

I need to know what this line of code does and how it works so I can adapt it to control when the class width2 is added.

The main line of code that is confusing me is: if ( number % 7 % 2 === 1 ) {

Also this means I need to add a class of .number with a number inside to make some blocks a different size.

Code:

---

$(function(){
     
      var $container = $('#container');
         
          // add randomish size classes -
      $container.find('.item').each(function(){
        var $this = $(this),
            number = parseInt( $this.find('.number').text(), 10 );
        if ( number % 7 % 2 === 1 ) {
          $this.addClass('width2');
        }
        if ( number % 3 === 0 ) {
          $this.addClass('height2');
        }
      });
     
      $container.isotope({
                  itemSelector: '.item',
                  masonry : {
                          columnWidth: 240
                        }
      });
     
});

---

Here is the other code if this helps but you will need to download Isotope.

HTML Code:

---

<div id="container">
  <div class="item"><p class="number">20</p></div>
  <div class="item"><p class="number">2</p></div>
  <div class="item"><p class="number">2</p></div>
  <div class="item"><p class="number">3</p></div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

---

Code:

---

.item {
        width:200px;
        height:200px;
        background:#f00;
        margin:10px;
}
.width2 {
        width:420px;
        height:420px;
}

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -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:      -o-transform, 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;
}

---

In arithmetic, the Euclidean division is the conventional process of division of two integers producing a quotient and a remainder. The operator % give the remainder of division of number by n with something like number % n.

Then if (number % 3 === 0) is true if number is a multiple of three.

The condition number % 7 % 2 === 1 seems a little more subtle.
Its true if (number % 7) % 2 === 1 or number % 7 is odd.

For the first integers, its is true for the following blue integers

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23...
Its is true sensibly once every two but with exceptions (twice false) after the third realization...

Hope that help

Thank you very much for your reply. I have more of an idea of what the script is doing.

I think I need to locate a better way and just add classes at random to create my different sized divs.

Thank you.

To randomly select classes or widths, you can write :

Code:

---

// a class from N (cl0, cl1, cl2 ... clN-1)
var N=10;
var myRandomClasse='cl'+Math.floor(Math.random()*N);

// but you can to choose a with or height between min and max pixels with
var min=100,max=400;
var myRandomWidth=(min+Math.floor(Math.random()*(max-min+1))+'px';

// or to chose among different widths
var myWidth=[100,110,120,130,140,150,160,170,180,190,200];
var myRandomWidth=myWidth[Math.floor(Math.random()*myWidth.length)]+'px';

---