溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Waterfall.js有什么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
jq-waterfall是一款仿Pinterest網(wǎng)站的響應式無限動態(tài)加載圖片瀑布流特效jQuery插件。該瀑布流特效使用ajax調用來動態(tài)加載圖片，達到無限加載的效果。它使用簡單，兼容性好，值得推薦！
jq-waterfall使用方法
使用這個瀑布流插件需要引入jQuery和jquery.waterfall.js文件。
<scriptsrc="js/jquery-1.11.1.min.js"></script>
<scriptsrc="js/jquery.waterfall.js"></script>
jq-waterfall結構
HTML結構
該瀑布流特效的HTML結個使用一個<div>來包裹圖片，然后在外圍使用一個<div>作為包裹容器。
<divid="demo">
<divclass="box"><imgsrc="img/01.jpg"alt=""></div>
<divclass="box"><imgsrc="img/02.jpg"alt=""></div>
<divclass="box"><imgsrc="img/03.jpg"alt=""></div>
...
</div>
CSS樣式
DEMO中給出了這個瀑布流的基本樣式，你可以自行修改為你需要的瀑布流樣式。
#demo{
margin:auto;
position:relative;
}
.box{
float:left;
padding:10px;
border:1pxsolid#ccc;
background:#f7f7f7;
box-shadow:008px#ccc;
}
.box:hover{box-shadow:0010px#999;}
.boximg{width:200px;}
插件使用Javascript來生成Pinterest樣式的網(wǎng)格瀑布流布局。使用ajaxCallback來在頁面向下滾動的時候對圖片進行動態(tài)加載，以達到無限瀑布流的效果。
關于“Waterfall.js有什么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
