thinkPHP實現瀑布流

2024-09-09 15:19:45

字體：大中小

來源：轉載

供稿：網友

很多人都想做瀑布流的效果,這里告訴大家官網使用的方法,首先要下載瀑布流的插件jquery.masonry.min.js 地址：http://masonry.desandro.com/index.html里面包含的很多示例.

流程:

1，頁面初始化時,調用插件進行一次排版；

2，當用戶將滾動條拖到底部時,用ajax加載一次數據,并排版顯示

3，重復2,直到無數據

Html代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>



<style type="text/css">

body {margin:40px auto; width:800px; font-size:12px; color:#666;}

.item{

border: 1px solid #D4D4D4;

color: red;

margin: 0 10px 10px 0;

padding: 10px;

position: relative;

width: 200px;

}

.loading-wrap{

bottom: 50px;

width: 100%;

height: 52px;

text-align: center;

display: none;

}

.loading {

padding: 10px 10px 10px 52px;

height: 32px;

line-height: 28px;

color: #FFF;

font-size: 20px;

border-radius: 5px;

background: 10px center rgba(0,0,0,.7);

}

.footer{

border: 2px solid #D4D4D4;

}

</style>



</head>

<body>



<script type="text/javascript" src="/test/public/Js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="/test/public/Js/jquery.masonry.min.js"></script>





<div id="container" class=" container">



<volist name="height" id="vo">

<div class="item" style="height:{$vo}px;">瀑布流下來了</div>

<input type="hidden" name="last_id" class="last_id" value="{$vo.id}"/>

</volist>

</div>





<div id="loading" class="loading-wrap">

<span class="loading">加載中，請稍后...</span>

</div>





<div class="footer"><center>我是頁腳</center></div>



<script type="text/javascript">

//用于轉換unix時間戳

function unix_to_datetime(unix)

{

var now = new Date(parseInt(unix) * 1000);

return now.toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");

}

$(function(){

//頁面初始化時執行瀑布流

var $container = $('#container');

$container.masonry({

itemSelector : '.item',

isAnimated: true

});

//用戶拖動滾動條，達到底部時ajax加載一次數據

var loading = $("#loading").data("on", false);//通過給loading這個div增加屬性on，來判斷執行一次ajax請求

$(window).scroll(function(){

if(loading.data("on")) return;

if($(document).scrollTop() > $(document).height()-$(window).height()-$('.footer').height()){//頁面拖到底部了

//加載更多數據

loading.data("on", true).fadeIn(); //在這里將on設為true來阻止繼續的ajax請求

//獲取最后一個id

var lastid = $('.last_id:last').val();

$.get(

"getMore", //要跳轉的頁面

{lastid:lastid},//傳值

function(data){

//獲取到了數據data,后面用JS將數據新增到頁面上

var getdata = data.data;

var html = "";

if($.isArray(getdata)){

$.each(data.data,function(i,item) {

html += "<div class=/"item/" style=/"height:"+data[i]+"px;/">瀑布又流下來了</div>";

});

var $newElems = $(html).css({ opacity: 0 }).appendTo($container);

$newElems.imagesLoaded(function(){

$newElems.animate({ opacity: 1 });

$container.masonry( 'appended', $newElems, true );

});

//一次請求完成，將on設為false，可以進行下一次的請求

loading.data("on", false);

}

loading.fadeOut();

},

"json"

);

}

});

});

</script>

</body>

</html>

Action代碼

//初始化的數據

public function lists(){

$data = D('Info')->order('id DESC')->limit(10)->select();

$this->assign('data', $data);

$this->display();

}

//獲取一次請求的數據

public function getMore(){

//獲取最后一個id

if(!emptyempty($_GET['lastid']))$map['id'] = array('lt', $_GET['lastid']);

$data = D('Info')->where($map)->order('id DESC')->limit(10)->select();

$this->ajaxReturn($data);

}