Isotope是一款效果非常神奇的元素分類過濾和排序布局jQuery插件。
Isotope 是 Masonry 布局的作者 David DeSandro 的一款力作，該分類過濾和排序插件允許你以非常簡單和炫酷的方式來隱藏和顯示元素，以及對元素按照指定的規則進行排序。
Isotope 可以設置多種佈局方式：masonry 佈局、水佈布局、垂直佈局、適合行佈局、適合列佈局，此外還可以動態添加，刪除，排序，篩選元素。
版權信息
Isotope不是完全免費的軟件，用於商業用途時需要向作者購買。
作為非商業用途使用時，在遵循 GPL v3 License 規範的前提下，你可以自由使用該插件。
基本使用
1 2 | <script src="../js/jquery-1.7.1.min.js"></script> <script src="../jquery.isotope.min.js"></script> |
Isotope要求jQuery1.4.3版本以上。首先需要在HTML頁面中引入jQuery和isotope。
1 2 3 4 5 | <div id="container"> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> </div> |
Isotope可以工作在一個包含很多類似item的container中，div 中#container，聲明了很累類似的div .item。
1 2 3 | $('#container').isotope({ itemSelector : '.item' }); |
See the Pen isotope+bootstrap基本 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
圖片戴入時會疊圖，可使用 imagesloaded.js 套件，將圖片完整戴完後在重新刷視窗。
imagesLoaded.js
1 2 3 4 5 6 | // initialize Isotope after all images have loaded var $container = $('#container').imagesLoaded( function() { $container.isotope({ // options }); }); |
1 2 3 4 5 6 7 8 9 | // or with vanilla JS var container = document.querySelector('#container'); var iso; // initialize Isotope after all images have loaded imagesLoaded( container, function() { iso = new Isotope( container, { // options }); }); |
或者先初始化Isotope，然後在圖片加載完成之後再設置布局：
1 2 3 4 5 6 7 8 | // initialize Isotope var $container = $('#container').isotope({ // options }); // layout Isotope again after all images have loaded $container.imagesLoaded( function() { $container.isotope('layout'); }); |
1 2 3 4 5 6 7 8 9 | // or with vanilla JS // initialize Isotope var iso = new Isotope( container, { // options }); // layout Isotope again after all images have loaded imagesLoaded( container, function() { iso.layout(); }); |
純JavaScript使用Isotope
Isotope並不一定需要jQuery，可以通過純js來使用Isotope。
可以通過 new Isotope( element, options ) 方法來初始化一個 Isotope 對象實例。Isotope構造器接收兩個參數：一個容器元素和一個參數選項對象。
1 2 3 4 5 6 7 | var container = document.querySelector('#container'); // init var iso = new Isotope( container, { // options itemSelector: '.item', layoutMode: 'fitRows' }); |
1 2 3 | var iso = new Isotope( '#container', { // options }); |
使用HTML元素來初始化
直接在html中初始化Isotope，不用任何的javascript。在容器元素上添加class js-isotope。參數可以通過一個data-isotope-options屬性來給定。
1 | <div id="container" class="js-isotope" data-isotope-options='{ "columnWidth": 200, "itemSelector": ".item" }'> |
在HTML中設置的參數選項必須是可用的json格式數據，Keys需要雙引號引起來，例如：”itemSelector”:。注意：外部的HTML屬性值使用單引號引起來，json使用雙引號。