首頁 >web前端 >js教程 >超棒的響應式佈局jQuery插件Freetile.js_jquery

超棒的響應式佈局jQuery插件Freetile.js_jquery

WBOY
WBOY原創
2016-05-16 16:31:071768瀏覽

線上示範

我們曾經介紹過兩個知名的響應式佈局插:isotopemasonary,今天我們這裡再介紹一款相當不錯的響應式佈局插件– Freetile.js,使用它同樣可以產生超酷的動態佈局效果。相信大家一定會喜歡!

主要特性

Freetie來自AssemblageAssemblage Plus的內建佈局引擎,設計靈感來自於Masonry,VGrid和Wookmark,但是和他們相比較,擁有以下獨特的地方:

允許包含任何尺寸的元素,並且不要求一個固定的列寬度,因此你不需要指定列寬度來迎合你的元素大小內建演算法允許你很容易的自訂插入的位置,滿足不同喜好的展示方式。例如,向左或向右對齊,或接近特定元素。智能的動畫方式能夠很好的判斷是否需要動畫特效。例如,剛加入的元素和不可見的元素。只要使用Assemblage 和 Assemblage Plus模板的網站都在使用它,所以說非常穩定。如何使用

基本使用方式:

Js代碼

複製程式碼 程式碼如下:
$('#container').freetile();
$('#container').freetile();

啟用動畫特效:

Js程式碼複製程式碼
程式碼如下:
$('#container').freetile({animate: true,elementDelay:30});

指定一個自訂的元素選擇器:

Js程式碼複製程式碼
程式碼如下:
$('#container').freetile({selector: '.thumbs'});

是不是很簡單,有需要的話可以直接拿走哈,千萬別跟我客氣。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn