title: jquery fires function repetitive every time the window resizes - but should only once
body: <p>i want to fill empty spaces in an article list with some placeholder PNGs.
  If the windowsize is 320 an there is an odd amount of items -> 1 placeholder to fill.</p>
  
  <p>If the windowsize is bigger 320 and there is just one article listed or an even amount of articles is listed, one or two placeholders should be added.</p>
  
  <p>Works fine, but the script always fires placeholder, everytime the windowsize changes.</p>
  
  <p>Here it is:</p>
  
  <pre><code>$(document).ready(function() {
  
  //the first loaded articlelist
  var str = $('.item').length;
  var width = $(window).width();
  
  if ((str % 2) != 0 &amp;&amp; width == 320) {
  $('div.item').last().after('&lt;div class="filler"&gt;&lt;/div&gt;');
  }
  if ((str % 3) === 1 &amp;&amp; width &gt; 320) {
  $('div.item').last().after('&lt;div class="filler"&gt;&lt;/div&gt;&lt;div class="filler"&gt;&lt;/div&gt;');
  }
  if ((str  % 3) === 2 &amp;&amp; width &gt; 320) {
  $('div.item').last().after('&lt;div class="filler"&gt;&lt;/div&gt;');
  }
  
  $(window).resize(function(){
      if($(this).width() != width){
          width = $(this).width()
          if ((str % 2) != 0 &amp;&amp; $(window).width() == 320) {
          $('div.item').last().after('&lt;div class="filler"&gt;&lt;/div&gt;');
      }
      if ((str % 3) === 1 &amp;&amp; $(window).width() &gt; 320) {
          $('div.item').last().after('&lt;div class="filler"&gt;&lt;/div&gt;&lt;div class="filler"&gt;&lt;/div&gt;');
      }
      if ((str  % 3) === 2 &amp;&amp; $(window).width() &gt; 320) {
          $('div.item').last().after('&lt;div class="filler"&gt;&lt;/div&gt;');
      }
      }
  });
  ...
  </code></pre>