【JQ】瀑布流與無限滾動條一起使用,雙劍合璧
一般都會把masonry和infinitescroll聯合使用
基本:
<script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script src="jquery.infinitescroll.min.js" type="text/javascript"></script> <script src="jquery.masonry.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var $container = $('#content ul'); //設定容器 $('#content ul').infinitescroll({ navSelector : "div.page .pages", //導航的選擇器 nextSelector : "div.page .pages a.nextpage", //包含下一頁連結的選擇器 itemSelector : "#content ul li" //你將要取回的選項(內容塊) }, function( newElements ) { //程式執行完的回撥函式 var $newElems = $( newElements ); $container.masonry( 'appended', $newElems ); }); $('#content').masonry({ itemSelector : '#content li', //子類元素 columnWidth : 251 //一列的寬度 }); }); </script>
例項1:載入10頁後停止,出現大分頁數字
<script type="text/javascript"> function item_masonry(){ $('.item img').load(function(){ $('.infinite_scroll').masonry({ itemSelector: '.masonry_brick', columnWidth:226, gutterWidth:15 }); }); $('.infinite_scroll').masonry({ itemSelector: '.masonry_brick', columnWidth:226, gutterWidth:15 }); } $(function(){ item_masonry(); $('.item').fadeIn(); var sp = 1 $(".infinite_scroll").infinitescroll({ navSelector : "#more", nextSelector : "#more a", itemSelector : ".item", loading:{ img: "images/masonry_loading_1.gif", msgText: ' ', finishedMsg: '木有了', finished: function(){ sp++; if(sp>=10){ //到第10頁結束事件 $("#more").remove(); $("#infscr-loading").hide(); $("#page").show(); $(window).unbind('.infscr'); } } },errorCallback:function(){ $("#page").show(); } },function(newElements){ var $newElems = $(newElements); $('.infinite_scroll').masonry('appended', $newElems, false); $newElems.fadeIn(); item_masonry(); return; }); }); </script>
<div class="item_list infinite_scroll"> <div class="item masonry_brick">...</div> ...... </div> <div id="more"><a href="p2.html"></a></div> <div id="page" class="page" style="display:none;"> <div class="page_num"> <span class="unprev"></span> <span class="current">1</span> <a href="p11.html"> 2 </a> <a href="p21.html"> 3 </a> <a href="p31.html"> 4 </a> <a href="p41.html"> 5 </a> <span class="etc"></span> <a href="p111.html">12</a> <a href="#" class="next"></a> </div> </div>
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
columnWidth: 100
});
});
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.box', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
<div id="container">
<div class="box col3">...</div>
<div class="box col1">...</div>
<div class="box col2">...</div>
......
</div>
<nav id="page-nav">
<a href="../pages/2.html"></a>
</nav>
相關推薦
【JQ】瀑布流與無限滾動條一起使用,雙劍合璧
一般都會把masonry和infinitescroll聯合使用 基本: <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script src="jquery
【JS】深拷貝與淺拷貝的區別,實現深拷貝的幾種方法
如何區分深拷貝與淺拷貝,簡單點來說,就是假設B複製了A,當修改A時,看B是否會發生變化,如果B也跟著變了,說明這是淺拷貝,拿人手短,如果B沒變,那就是深拷貝,自食其力。 此篇文章中也會簡單闡述到棧堆,基本資料型別與引用資料型別,因為這些概念能更好的讓你理解深拷貝與淺拷貝。 我們來舉個淺拷貝例
【live555】推流者使用的ServerMediaSession類,以及如何產生SDP
對於我個人而言,可能比較關注的是SDP的生成,所以會對SDP的一些方法和屬性,加顏色標示。 ############################### (1)推流者用的一個數據結構 server media session,這個session可以含有多個子(sub)s
【bzoj1283】序列 線性規劃與費用流
子序列 from emp sin href name clu html def 題目描述 給出一個長度為 的正整數序列Ci,求一個子序列,使得原序列中任意長度為 的子串中被選出的元素不超過K(K,M<=100) 個,並且選出的元素之和最大。 輸入 第1行三個數N
【乾貨】位元流複製裝置所有的資料------------資料恢復與檢視
來源: Unit 1: Computer Forensics Fundamentals 1.1 Computer Forensics Fundamentals Data Acquisition
【專題總結】網路流與二分圖(持續更新)
POJ 2112 大意 農夫約翰有 k 臺擠奶機和 c 只奶牛。任意兩個實體(擠奶機或奶牛)都在不同的地點,因此它們之間有相隔距離。每個擠奶機可以為 m 只奶牛擠奶。問怎樣分配擠奶機使得任意兩個實體之間的最長距離最小(每個奶牛都要分配到擠奶機,題目保證有
iOS 【使用CollectionView瀑布流佈局】
CollectionView是iOS 6引入的控制元件,今天的重點並不是介紹它,而是使用它進行佈局。效果圖如下: 兩列效果圖.png 三列效果圖.png 看了效果圖,再來說說具體的實現步驟: 1.新增CollectionView控制元件 [self.view addSu
【BZOJ4027】[HEOI2015]兔子與櫻花 貪心
註意 getchar des clas -s 裏的 多少 content 一個數 【BZOJ4027】[HEOI2015]兔子與櫻花 Description 很久很久之前,森林裏住著一群兔子。有一天,兔子們突然決定要去看櫻花。兔子們所在森林裏的櫻花樹很特殊。櫻花樹由
opencv如何實現【不用全局變量進行滾動條控制】
找到 stat static png std -1 threshold argv 自帶 opencv中自帶滾動條,其中一個問題是該回調函數(on_trackbar)大多使用的是全局變量,大型項目調試時弊端眾多,比如下圖: 為此,留意了void on_Trackbar(in
【BioCode】根據seq與位點信息截取窗口
窗口大小 txt -s font == def n) image pau 代碼說明 sequence24371.txt 以上為所有氨基酸的編號,序列,與位點標記。根據標記為“1”的位點,截取窗口:如下(實驗結果): 圖示為一個窗口為12的蛋白質片段 2N+1=2
【BZOJ4373】算術天才⑨與等差數列 線段樹+set
size true sam tput 組合 pre 無重復 second 希望 【BZOJ4373】算術天才⑨與等差數列 Description 算術天才⑨非常喜歡和等差數列玩耍。有一天,他給了你一個長度為n的序列,其中第i個數為a[i]。他想考考你,每次他會給出詢
【Swoole】簡單安裝與創建TCP服務器
客戶 編寫程序 lac nco 版本 size sock ear light pecl install swoole PHP的異步、並行、高性能網絡通信引擎,使用純C語言編寫,提供了php語言的異步多線程服務器,異步TCP/UDP網絡客戶端,異步MySQL
【jq】插件—彈出層layer.js
相冊 層級 http lan yui 版本 target 附加 layui layer.js包含了所有的層級情形,並且附加的有:tab層,相冊層、webIM層。 適用於移動版本的layer.js 為layer for mobile 配套的layui 非常適合用於後臺系統
【SCM】關於Gradle與maven的幾篇文章
all scm 對比 http detail ocs log lan bow Gradle官方文檔:https://docs.gradle.org/current/userguide/installation.html#sec:download 使用 Gradle 命令行
【BFS】鳴人與佐助
bsp struct 全部 main pac pri image iostream cnblogs 總時間限制:1000ms內存限制:65536kB描述 佐助被大蛇丸誘騙走了,鳴人在多少時間內能追上他呢? 已知一張地圖(以二維矩陣的形式表示)以及佐助和鳴人的位置。地
【Learning】多項式乘法與快速傅裏葉變換(FFT)
alt 技術 cos 相同 es2017 define ostream 意思 呵呵 簡介: FFT主要運用於快速卷積,其中一個例子就是如何將兩個多項式相乘,或者高精度乘高精度的操作。 顯然暴搞是$O(n^2)$的復雜度,然而FFT可以將其將為$O(n lg
【轉】JavaScript MD5 與 Java MessageDigest 加密後的值相同
cda padding highlight xe7 net abs algorithm urn -a function integer(n) { return n%(0xffffffff+1); } function shr(a,b) { a=integer(a);
【轉】https淺析與抓包
img 網站 字節 pan 嗅探 www. tcp 解析 算法 0.HTTP之殤 數據明文傳輸,易嗅探 數據完整性無驗證,易篡改 網站身份無認證,易假冒 由此誕生HTTPS。 1.什麽是HTTPS HTTP + SSL/TLS TLS是SSL的升級版
jq如何實現內容的無限滾動
script ava 如何實現 log highlight set absolut hidden rip html: <div> <ul> <li>1</li> <li
【總結】遊戲框架與架構設計(Unity為例)
單機 業務 github 事件 概念 lec 集合 架構模式 wid 使用框架開發遊戲 優點:耦合性低,重用性高,部署快,可維護性高,方便管理。提高開發效率,降低開發難度 缺點:增加了系統結構和實現的復雜性,需要額外花費精力維護,不適合小型程序,易影響運行效率 常見