폭포 류 의 작은 예 와 ThinkpHP 의 결합
5555 단어 thinkphp폭포 류JS 폭포 류아 약 스 폭포 류
사실 폭포 류 는 고정된 너비 나 높이 로 불규칙 한 div 를 만들어 내 는 것 이다.
흐름
1:페이지 를 초기 화 할 때 데 이 터 를 한 번 불 러 옵 니 다.
2.페이지 가 끝 날 때 데 이 터 를 다시 불 러 옵 니 다.
3.데이터 가 없 을 때 까지 반복 합 니 다.
<!DOCTYPE HTML>
<html>
<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>
<!-- jquery -->
<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>
<!-- jquery -->
<!-- -->
<div id="container" class=" container">
<!-- div ， -->
<volist name="height" id="vo">
<div class="item" style="height:{$vo}px;"> </div>
</volist>
</div>
<!-- -->
<!-- -->
<div id="loading" class="loading-wrap">
<span class="loading"> ， ...</span>
</div>
<!-- -->
<!-- -->
<div class="footer"><center> </center></div>
<!-- -->
<script type="text/javascript">
$(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
$.get(
"getMore",
function(data){
// data, JS
var html = "";
if($.isArray(data)){
for(i in data){
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 에 추가
class UserAction extends Action{
//
public function index(){
for ($i=0;$i<10;$i++){
$res[$i] = rand(100, 400);
}
$this->assign('height', $res);
$this->display();
}
//
public function getMore(){
for ($i=0;$i<6;$i++){
$res[$i] = rand(100, 400);
}
$this->ajaxReturn($res);
}
}주의:
창 이 페이지 아래로 굴 러 갈 지 여 부 를 판단 하여 ajax 로 데 이 터 를 불 러 올 지 결정 합 니 다.처리 하지 않 으 면 한꺼번에 여러 번 요청 할 것 이다.그래서 조건 을 사용 해 제한 해 야 한다.내 가 사용 하 는 것 은 한 요소 에$("\#loading").data("on",true)를 할당 하 는 것 입 니 다.요청 기간 에 true 로 판단 하면 요청 을 계속 하지 않 고 페이지 요청 이 끝 난 후에 false 로 값 을 부여 합 니 다.
실제 예 에서 Action 에서 데 이 터 를 초기 화 할 때 데이터베이스 에서 데 이 터 를 한 번 호출 해 야 합 니 다.
getMore 에서 도 끝까지 데 이 터 를 한 번 불 러 와 야 하기 때문에 데이터베이스 에서 요청 한 데 이 터 를 두 번 반복 하지 않도록 해 야 합 니 다.또는 판단 을 해서 완성 할 수 있 습 니 다.그렇지 않 으 면 중복 데 이 터 를 불 러 오 는 결 과 를 초래 할 수 있 습 니 다.
공동 취 미 를 가 진 분 들 은 252799167 을 추가 할 수 있 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thinkphp의 S 캐시 사용법!텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
