原文:
效果就如我的個人站yooao.cc
,把我實現的思路分享給大家。
masonry渲染頁面如果有時需要imagesloaded輔助,不然有可能會造成布局重疊。
乙個大體的思路:前端取得最後一篇文章的id,下拉時進行ajax請求新增文章進布局,並同時更新最後一篇文章的id,這樣就可往復迴圈實現無限瀑布流重新整理。
下面說說具體的實現:
一、前端
對於masonry
的基本布局,可以看它的文件。
在頁面第一次渲染時,我在容器底部設計乙個新增按鈕:
<因為我用的yii2框架,所以yii2提供的方法生成href,生成的href就像這樣: ,a id
="add-button"
href
="<?php echo url::to(['post/site/addpost','type_id'=>$type_id,'last_id' => $last_id]) ?>"
class
="btn btn-danger"
>載入更多
a>
type_id是對指定類別的文章新增時需要的,
last_id
就是最後一篇文章的id。
下面是具體的js**:
$(function二、後端(), //
提供給控制器last_id
beforesend: function
(), complete:
function
(), success:
function
(posts)
//將last_id變更為此次請求的最後一篇文章的id
last_id = posts[posts.length-1].id;
(function
()
//$elem是每個小塊的模版
var $elem = $('' + posts[i].title + '
');
//等載入完後才渲染新新增的小塊
$elem.imagesloaded( function
() );
i++;
},900);
})()
//8是我設定的每次新增的文章數,如果此次得到的文章數小於8說明已經到最後,count_post 的值將會為1,之後再下拉不會觸發ajax請求。
if(count_post < 8)
else
}
});
}});});
用yii2舉例,控制器**:
public function actionaddpost($type_id=nullpost模型的addpost方法:)
public function addpost($type_id=null)
if($type_id == null
)else
return
$posts;
}
Gallery 實現無限迴圈
通過設定最大值兩億來模擬迴圈 因為總數很大時,肯定數不過來,就相當於模擬了 但是你的實際資料可能只有十幾個 所以iv.setimageresource img.get position 8 通過position 會很大很大 模一下你的實際資料的大小,就行了 gallery.setselection ...
php實現無限分類
access public param pid 節點的id param array 返回該節點的所有後代節點 public function list cate pid 0 access private param arr array 要遍歷的陣列 param pid 節點的pid,預設為0,表示從...
ViewPager實現無限迴圈
從乙個方向上一直滑動。麼有滑到盡頭的感覺。詳細是怎麼實現的呢?看以下的思路。此處畫了一幅圖來表達實現無限迴圈的思路,即在資料起始位置前插入最後一項資料。在最後一項資料後插入第一項資料,當滑動到此處時。更新頁面的索引位置就ok了 這種方法用於資料處理,當中medialist是原始資料,newmedia...