javascript - 使用 Isotope 的 smartresize() 使 div 流畅

Question

我在如何实现 $(window).smartresize() 上纠结了几个小时使我的 div 流畅的功能。

我使用了这个 theme 中的 javascript但是当我尝试自己实现它时，我的 div 不会调整大小。

我做了一个更简单的页面来尝试测试它，就在这里。我通过这个多次运行 Chrome Inspector，似乎宽度没有随着调整大小而改变。我有一种感觉，因为我在 CSS 中使用了 :before 但我不确定。

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

鉴于您提供的链接指向 Isotope v1 文档，并且您使用的 resizable 选项完全是 Isotope v1 选项，我假设您使用的是 Isotope v1。

我建议您更新到 Isotope v2并为您的同位素元素使用百分比大小并使用 element sizing调整你的容器和column widths .此技术在 this 中进行了演示同位素的创建者 David DeSandro 的 jsfiddle。