Использование smartresize() Изотопа, чтобы сделать DIVS текучим

Question

Я часами застрял на том, как реализовать функцию $(window).smartresize(), чтобы сделать мои div'ы текучими.

Я использовал javascript из этой темы, но когда я пытаюсь реализовать его сам, мои div не меняются.

Я сделал более простую страницу, чтобы попытаться проверить ее, и вот она. Я запускал Chrome Inspector много раз через это, и кажется, что ширина не меняется с изменением размера. У меня такое чувство, что я использовал: раньше в CSS, но я не уверен.

HTML

<div class="thumbs"> 
 <div class="item" style="background-image: url('http://placehold.it/300x225');"> </div> 
 <div class="item" style="background-image: url('http://placehold.it/300x225');"></div>
 <div class="item" style="background-image: url('http://placehold.it/300x225');"> </div>
 <div class="item" style="background-image: url('http://placehold.it/300x225');"> </div>
 <div class="item" style="background-image: url('http://placehold.it/300x225');"> </div>
</div>

CSS

.item {
 overflow:hidden;
 width:308px;
 float: left;
 position: relative;
 background-size: 100%;
 background-repeat: no-repeat;
}

.item:after {
 content: "";
 display: block;
 padding-top: 75%;
}

JS

var $gridContainer = $('.thumbs');
var colW;
var thumbWidth = 308;

function isotopeInit() {
 setColumns();  
 $gridContainer.isotope({       
  resizable: false,
  layoutMode: 'fitRows',
  masonry: {
   columnWidth: colW
  }
 });    
}

function setColumns()
{   
 var columns;
 console.log($gridContainer.width()/thumbWidth);

 columns = Math.ceil($gridContainer.width()/thumbWidth);    
 colW = Math.floor($gridContainer.width() / columns);
 $('.item').each(function(id){
  $(this).css('width',colW-gridGutter+'px');
 });
}

function gridResize() { 
 setColumns();

 $gridContainer.isotope({
  resizable: false,
  masonry: {
   columnWidth: colW
  }
 })     
}

$(window).load(function(){      
 isotopeInit(); 

});

$(window).smartresize(function(){
 gridResize();
});     

Answer 1

Функция smartresize() была доступна только в Isotope v1, а я работал под управлением v2. В конце концов, я решил эту проблему с помощью плагина jQuery с открытым исходным кодом, который предоставлял те же функции, что и smartresize(), и был совместим с Isotope v2.

Answer 2

Учитывая, что предоставленная вами ссылка ведет на документацию по Isotope v1 и что resizable опция, которую вы используете, является исключительно опцией Isotope v1, я предполагаю, что вы используете Isotope v1.

Я бы посоветовал вам обновить Isotope v2 и использовать размеры в процентах для ваших элементов Isotope, а также использовать размеры элементов для изменения размеров контейнера и ширины столбцов. Эта техника продемонстрирована в этом jsfiddle Дэвидом ДеСандро, создателем Изотопа.