Fluid / responsive

This hack allows you to use percentage-based widths for item elements for fluid / responsive layouts.

var $container = $('#container')
// initialize Isotope
$container.isotope({
  // options...
  resizable: false, // disable normal resizing
  // set columnWidth to a percentage of container width
  masonry: { columnWidth: $container.width() / 5 }
});

// update columnWidth on window resize
$(window).smartresize(function(){
  $container.isotope({
    // update columnWidth to a percentage of container width
    masonry: { columnWidth: $container.width() / 5 }
  });
});

Filters

Sort

Sort direction

Etc

80

Hg

Mercury

200.59

52

Te

Tellurium

127.6

83

Bi

Bismuth

208.9804

48

Cd

Cadmium

112.411

20

Ca

Calcium

40.078

75

Re

Rhenium

186.207

81

Tl

Thallium

204.3833

51

Sb

Antimony

121.76

27

Co

Cobalt

58.933195

71

Lu

Lutetium

174.9668

18

Ar

Argon

39.948

37

Rb

Rubidium

85.4678

7

N

Nitrogen

14.0067

93

Np

Neptunium

(237)

89

Ac

Actinium

(227)

下载代码说明
X关闭

Isotope 基于jQuery的智能布局插件实例大全

Isotope - jQuery智能布局插件。Isotope绝对是一个令人难以置信的jQuery插件,你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目,重新排序和整理甚至更多,同时Isotope还有许多很酷的动画。所附带的示例包括网页中常见到一些实用特效,都是一些经典的特效。