Почему отображаются 3 картинки вместо 4?

164
27 марта 2018, 02:58

Не корректно работает плагин isotope(https://isotope.metafizzy.co/) на странице: http://bad-studio.pl/realizacje/. Вместо 3 картинок в строке, должно быть 4. В чём может быть проблема?

$.fn.imagesLoaded = function(callback){ 
  var elems = this.filter('img'), 
  len   = elems.length, 
  blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 
   
  elems.bind('load.imgloaded',function(){ 
    if (--len <= 0 && this.src !== blank){  
      elems.unbind('load.imgloaded'); 
      callback.call(elems,this);  
    } 
  }).each(function(){ 
     // cached images don't fire load sometimes, so we reset src. 
     if (this.complete || this.complete === undefined){ 
      var src = this.src; 
        // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f 
        // data uri bypasses webkit log warning (thx doug jones) 
        this.src = blank; 
        this.src = src; 
      }   
    });  
 
  return this; 
}; 
 
 
 
 
$isotope_container = $(".realize-items"); 
var  $grid = $('#isotope-items').isotope({ 
  itemSelector: '.isotope-item', 
  sortBy : 'original-order', 
  masonry: { 
    columnWidth: window.innerWidth / 4, 
    rowHeight: 480,  
    isFitWidth: true 
  } 
 
}); 
 
$( window ).resize(function() { 
  if ( window.innerWidth < 1441 && window.innerWidth > 1370) { 
   $grid = $('#isotope-items').isotope({ 
     itemSelector: '.isotope-item', 
     masonry: { 
      columnWidth:  window.innerWidth / 4, 
      rowHeight: 400,  
      isFitWidth: true 
    } 
  }); 
 }  
 if ( window.innerWidth < 1371 &&  window.innerWidth > 1040) { 
   $grid = $('#isotope-items').isotope({ 
     itemSelector: '.isotope-item', 
     masonry: { 
      columnWidth:  window.innerWidth / 3, 
      rowHeight: 400,  
      isFitWidth: true 
    } 
  }); 
 } 
 if ( window.innerWidth < 1041 &&  window.innerWidth > 740) { 
   $grid = $('#isotope-items').isotope({ 
     itemSelector: '.isotope-item', 
     masonry: { 
      columnWidth: window.innerWidth / 2, 
      rowHeight: 400,  
      isFitWidth: true 
    } 
  }); 
 } 
  
 if ( window.innerWidth < 740) { 
   $grid = $('#isotope-items').isotope({ 
     itemSelector: '.isotope-item', 
     masonry: { 
      columnWidth: window.innerWidth , 
      rowHeight: 400,  
      isFitWidth: true 
    } 
  }); 
 } 
  
}); 
 
if ( window.innerWidth < 1441 &&  window.innerWidth > 1370) { 
 $grid = $('#isotope-items').isotope({ 
   itemSelector: '.isotope-item', 
   masonry: { 
    columnWidth: $isotope_container.width() / 4, 
    rowHeight: 400,  
    isFitWidth: true 
  } 
}); 
}  
if ( window.innerWidth < 1371 &&  window.innerWidth > 1040) { 
 $grid = $('#isotope-items').isotope({ 
   itemSelector: '.isotope-item', 
   masonry: { 
    columnWidth: $isotope_container.width() / 3, 
    rowHeight: 400,  
    isFitWidth: true  
  } 
}); 
} 
if ( window.innerWidth < 1041 &&  window.innerWidth > 740) { 
 $grid = $('#isotope-items').isotope({ 
   itemSelector: '.isotope-item', 
   masonry: { 
    columnWidth: $isotope_container.width() / 2, 
    rowHeight: 400,  
    isFitWidth: true 
  } 
}); 
} 
 
if ( window.innerWidth < 740) { 
 $grid = $('#isotope-items').isotope({ 
   itemSelector: '.isotope-item', 
   masonry: { 
    columnWidth: $isotope_container.width() , 
    rowHeight: 400,  
    isFitWidth: true 
  } 
}); 
} 
 
 
 
$isogrid = $grid; 
 
$('#isotope-filter').on( 'click', '.realize-category__item', function() { 
  var filterValue = $( this ).attr('data-filter'); 
  $grid.isotope({ filter: filterValue }); 
   
  $('#isotope-filter .realize-category__item').removeClass('active'); 
  $( this ).addClass('active'); 
  return false; 
}); 
 
$(".realize-category__item").click(function(){ 
  $(".realize-category__item").removeClass("active"); 
  $(this).addClass("active"); 
}); 
 
 
 
 
 
$(".realize-items .ri-btn").click(function(e){ 
  $(this).addClass("animated"); 
  var $those = $(this); 
  e.stopPropagation(); 
  e.preventDefault(); 
  $that = $(".realize-category__item.active"); 
   
  var id = $that.attr("data-reid"); 
  var all_start_array = {}; 
   
   
  if(id == "all"){ 
     
    $(".realize-category__item").each(function(){ 
       
      if($(this).attr("data-reid") != "all"){ 
         
        
        all_start_array[$(this).attr("data-gallerytitle")] = $(this).attr("data-start"); 
        $(this).attr("data-start", parseInt($(this).attr("data-start")) + 6); 
      } 
       
    }); 
     
     
  }else{ 
    all_start_array =  $that.attr("data-start"); 
    $that.attr("data-start",parseInt($that.attr("data-start")) + 9); 
     
  } 
   
 
   
  $.ajax({ 
    
   method: "POST", 
   url: "ajaxgalleries.html", 
   data: { id: id, gallery_start: all_start_array,tpl: "realizationSingleItem"} 
    
 }).done(function(data) { 
  if(data == ""){ 
    $(".realize-items .ri-btn").addClass('na'); 
    console.log("skończyły się moje realizacje w wybranej kategorii ? O_o  Chcesz zobaczyć więcej skontaktój się ze mną !!!=) "); 
  } 
  var $appendinfo = $(data); 
  $grid.append( $appendinfo ).isotope( 'appended', $appendinfo ); 
  $grid.imagesLoaded( function() { 
    $grid.isotope('layout'); 
  }); 
  $('.realize-itm').unbind("click"); 
  $('.realize-itm').click(function(e) { 
    contentFunction(e); 
  }); 
  setTimeout(function(){ 
   $those.removeClass("animated"); 
 },1000); 
}); 
}); 
 
var contentFunction = function(event) { 
  event.preventDefault(); 
  event.stopPropagation(); 
  var href = $(event.currentTarget).attr("href"); 
  $.ajax({  
    method: "POST", 
    url: href, 
  }).done(function(data) { 
    $('.realizepp').empty().append(data); 
    $('.chrestyk').click(function() { 
      $('.realizepp').empty(); 
    }); 
  }); 
};  
 
$(".realize-items .ri-btn").trigger("click"); 
if(window.location.hash == ""){ 
   
}else{ 
  var href = window.location.hash.replace("#",""); 
  $(".realize-category__item").each(function(e){ 
    if($(this).attr("data-gallerytitle") == href){ 
      $(this).trigger("click"); 
    } 
  }); 
   
}
.realize-category { 
	margin: 75px 0; 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	text-align: center; 
	justify-content: space-around; 
	-ms-align-items: center; 
	align-items: center; 
} 
 
.realize-category__item { 
  position: relative; 
	text-transform: uppercase; 
	font: 1.7rem MPRegular; 
	color: #898181; 
} 
 
.realize-category__item:before { 
  content: ''; 
  position: absolute; 
  bottom: -5px; 
  left: 50%; 
  transform: translateX(-50%); 
  height: 2px; 
  width: 0; 
  background: crimson; 
  transition: .2s ease-in-out all; 
} 
 
.realize-category__item:hover:before, 
.realize-category__item.active:before { 
	width: 100%; 
} 
 
 
.realize-items { 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	flex-direction: column; 
	text-align: center; 
} 
 
.ri-container { 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: space-between; 
} 
.ri-container-dadwa{ 
  width: 100% !important; 
  margin-bottom: 20px; 
} 
.realize-itm { 
  min-width: 300px; 
  width: 25%; 
  /* padding: 10px; */ 
  box-sizing: border-box; 
  height: 300px; 
  overflow: hidden; 
} 
 
.realizeP-ctr { 
  display: flex; 
} 
 
.realize-itm__img { 
  position: relative; 
	width: 100%; 
	height: 300px; 
	overflow: hidden; 
} 
 
.realize-itm__img .rii-h { 
	width: 100%; 
	height: 100%; 
	background-repeat: no-repeat; 
	background-size: cover; 
	background-position: center; 
	filter: grayscale(0); 
	transition: .5s ease all; 
} 
.realize-itm__img .rii-h:after { 
  content: ''; 
  background: rgba(20,20,20, .85); 
  display: block; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  opacity: 0; 
  transition: .4s ease all; 
} 
 
 
.realize-itm:hover .realize-itm__img .rii-h:after { 
  opacity: 1; 
  transition: .4s ease all; 
} 
   
.realize-itm__hvrblck { 
  position: absolute; 
  width: 100%; 
  left: 50%; 
  transform: translateX(-50%); 
  bottom: -200px; 
  -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); 
  -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); 
  transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); 
} 
 
 
.realize-itm:hover .realize-itm__hvrblck { 
  bottom: 40px; 
} 
 
.realize-itm:hover .realize-itm__img .rii-h { 
	filter: grayscale(80%); 
	transform: scale(1.2)rotate(2deg); 
} 
 
.realize-itm__h1 { 
	font: 1.5rem MPBold; 
	padding: 10px 0; 
	color: #000; 
	color: #fff; 
} 
 
.realize-itm__ttl { 
	font: 1.4rem MPRegular; 
  color: #f9f5f5; 
  color: #eae8e8; 
  padding: 0 10px 10px 10px; 
} 
 
.ri-btn { 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	-ms-align-items: center; 
	align-items: center; 
	margin: auto; 
	position: relative; 
	box-sizing: border-box; 
	font: 1.4rem MPMedium; 
	transition: .3s ease; 
	padding: 15px 35px; 
	border: 2px solid #000; 
	color: #000; 
	transition: .3s ease-in-out all; 
}
<div class="realize-items"> 
  <div class="ri-container-dadwa" id="isotope-items"> 
 
 
 
 
    <a href="http://bad-studio.pl/realizacje/architektura-i-projektowanie/osiedle-miejska-etap-2.html" class="realize-itm isotope-item items7"> 
      <div class="realize-itm__img"> 
        <div class="rii-h" style="background-image: url(assets/img/ARCHITEKTURA/Miejska_2.jpg" );=""></div> 
 
        <!-- REALIZE HOVER BLOCK --> 
        <div class="realize-itm__hvrblck"> 
          <h1 class="realize-itm__h1"> 
            Osiedle Miejska - Etap 2 
          </h1> 
          <div class="realize-itm__ttl"> 
            Osiedle Miejska - Etap 2 - Rzeszów 
          </div> 
        </div> 
        <!-- REALIZE HOVER BLOCK --> 
      </div> 
    </a> 
    <a href="http://bad-studio.pl/realizacje/architektura-i-projektowanie/lawendowa-rzeszów.html" class="realize-itm isotope-item items7"> 
      <div class="realize-itm__img"> 
        <div class="rii-h" style="background-image: url(assets/img/ARCHITEKTURA/Lawendowa_1.jpg" );=""></div> 
 
        <!-- REALIZE HOVER BLOCK --> 
        <div class="realize-itm__hvrblck"> 
          <h1 class="realize-itm__h1"> 
            Lawendowa Rzeszów 
          </h1> 
          <div class="realize-itm__ttl"> 
            Wizualizacje domu jednorodzinnego przy ul Lawendowej w Rzeszowie 
          </div> 
        </div> 
        <!-- REALIZE HOVER BLOCK --> 
      </div> 
    </a> 
    <a href="http://bad-studio.pl/realizacje/architektura-i-projektowanie/kompleks-uzdrowiskowy-w-baszni-dolnej.html" class="realize-itm isotope-item items7"> 
      <div class="realize-itm__img"> 
        <div class="rii-h" style="background-image: url(assets/img/ARCHITEKTURA/Basznia_1.jpg" );=""></div> 
 
        <!-- REALIZE HOVER BLOCK --> 
        <div class="realize-itm__hvrblck"> 
          <h1 class="realize-itm__h1"> 
            Kompleks uzdrowiskowy w Baszni Dolnej 
          </h1> 
          <div class="realize-itm__ttl"> 
            Wizualizacje kompleksu uzdrowiskowego w Baszni Dolnej 
          </div> 
        </div> 
        <!-- REALIZE HOVER BLOCK --> 
      </div> 
    </a> 
    <a href="http://bad-studio.pl/realizacje/architektura-i-projektowanie/rewitalizacja-rynku-lubaczów.html" class="realize-itm isotope-item items7"> 
      <div class="realize-itm__img"> 
        <div class="rii-h" style="background-image: url(assets/img/ARCHITEKTURA/Rynek_Lubaczów_3.jpg" );=""></div> 
 
        <!-- REALIZE HOVER BLOCK --> 
        <div class="realize-itm__hvrblck"> 
          <h1 class="realize-itm__h1"> 
            Rewitalizacja Rynku - Lubaczów 
          </h1> 
          <div class="realize-itm__ttl"> 
            Projekt konkursowy rewitalizacji Rynku w Lubaczowie 
          </div> 
        </div> 
        <!-- REALIZE HOVER BLOCK --> 
      </div> 
    </a> 
    <a href="http://bad-studio.pl/realizacje/architektura-i-projektowanie/dom-jednorodzinny-w-rzeszowie.html" class="realize-itm isotope-item items7"> 
      <div class="realize-itm__img"> 
        <div class="rii-h" style="background-image: url(assets/img/ARCHITEKTURA/Leśne_Wzgórze_1.jpg" );=""></div> 
 
        <!-- REALIZE HOVER BLOCK --> 
        <div class="realize-itm__hvrblck"> 
          <h1 class="realize-itm__h1"> 
            Dom jednorodzinny w Rzeszowie 
          </h1> 
          <div class="realize-itm__ttl"> 
            Projekt domu jednorodzinnego w Rzeszowie 
          </div> 
        </div> 
        <!-- REALIZE HOVER BLOCK --> 
      </div> 
    </a> 
    <a href="http://bad-studio.pl/realizacje/architektura-i-projektowanie/dom-jednorodzinny-rzeszów.html" class="realize-itm isotope-item items7"> 
      <div class="realize-itm__img"> 
        <div class="rii-h" style="background-image: url(assets/img/ARCHITEKTURA/Corten_House_1.jpg" );=""></div> 
 
        <!-- REALIZE HOVER BLOCK --> 
        <div class="realize-itm__hvrblck"> 
          <h1 class="realize-itm__h1"> 
            Dom jednorodzinny Rzeszów 
          </h1> 
          <div class="realize-itm__ttl"> 
            Wizualizacje domu jednorodzinnego w Rzeszowie 
          </div> 
        </div> 
        <!-- REALIZE HOVER BLOCK --> 
      </div> 
    </a> 
    <a href="http://bad-studio.pl/realizacje/wnętrza-i-aranżacje/wnętrza-i-aranżacje-loasdlp,k,,l9repedyjh7e4y6rt.html" class="realize-itm isotope-item items8"> 
      <div class="realize-itm__img"> 
        <div class="rii-h" style="background-image: url(assets/img/aranzacje-wnetrz-kingi-sliwy-574173.jpg" );=""></div> 
 
        <!-- REALIZE HOVER BLOCK --> 
        <div class="realize-itm__hvrblck"> 
          <h1 class="realize-itm__h1"> 
            Wnętrza &amp; aranżacje 
          </h1> 
          <div class="realize-itm__ttl"> 
            Wnętrza &amp; aranżacje 
          </div> 
        </div> 
        <!-- REALIZE HOVER BLOCK --> 
      </div> 
    </a> 
    <a href="http://bad-studio.pl/realizacje/reklama-i-wzornictwo/reklama-i-wzornictwo-tralala.html" class="realize-itm isotope-item items9"> 
      <div class="realize-itm__img"> 
        <div class="rii-h" style="background-image: url(assets/img/digital-advertising-ep-2016.png" );=""></div> 
 
        <!-- REALIZE HOVER BLOCK --> 
        <div class="realize-itm__hvrblck"> 
          <h1 class="realize-itm__h1"> 
            Reklama &amp; wzornictwo 
          </h1> 
          <div class="realize-itm__ttl"> 
            Reklama &amp; wzornictwo 
          </div> 
        </div> 
        <!-- REALIZE HOVER BLOCK --> 
      </div> 
    </a> 
    <a href="http://bad-studio.pl/realizacje/rzuty-3d/rzuty-3d-312fds.html" class="realize-itm isotope-item items10"> 
      <div class="realize-itm__img"> 
        <div class="rii-h" style="background-image: url(assets/img/Rzut3d_02.jpg" );=""></div> 
 
        <!-- REALIZE HOVER BLOCK --> 
        <div class="realize-itm__hvrblck"> 
          <h1 class="realize-itm__h1"> 
            Rzuty 3d 
          </h1> 
          <div class="realize-itm__ttl"> 
            Rzuty 3d 
          </div> 
        </div> 
        <!-- REALIZE HOVER BLOCK --> 
      </div> 
    </a> 
  </div> 
  <a class="ri-btn"> 
    <img class="spinner" src="assets/img/spiner.png" alt="loader"> 
    załaduj więcej 
  </a> 
</div>

READ ALSO
Передача функции в другой поток Node JS

Передача функции в другой поток Node JS

При попытке передачи функции в другой поток, она исчезает, а с другими объектами всё работает исправно

226
Сравнение даты и времени (React js)

Сравнение даты и времени (React js)

Подскажите пожалуйста, как правильно сделать сравнение даты и времени? Задача состоит в следующем, одну дату и время я задаю, например (2019-03-26T10:29)...

147