使用 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

鉴于您提供的 link 转到 Isotope v1 文档，并且您使用的 resizable 选项完全是 Isotope v1 选项，我假设您使用的是 Isotope v1 .

我建议您更新到 Isotope v2 and use percentage sizing for your Isotope elements and use element sizing to resize your container and column widths. This technique is demonstarted in this David DeSandro 的 jsfiddle，Isotope 的创建者。

Answer 2

smartresize() 函数仅适用于 Isotope v1，而我使用的是运行 v2。最后，我通过使用开源 jQuery plugin 解决了这个问题，它提供了与 smartresize() 相同的功能并且与 Isotope v2 兼容。

使用 Isotope 的 smartresize() 使 div 流畅

Using Isotope's smartresize() to make divs fluid

javascript

jquery

html

css

jquery-isotope