php爬虫+smarty3+masonry+infinitescroll瀑布流效果
无限滚动概念
首先，它是基于jQuery的，另外还要明白无限滚动的概念：无限滚动的实现原理就是当你在网页上的滚动条滚动到离网页底部一定长度的时候，触发某ajax函数（infinite-scroll内已经封装好）,往后台加载文件或者数据，又或者从外部引入静态html形式文件。
效果如图所示：
1、样式、jquery文件引入：
<link href="<{__CSS__}>/main.css" rel="stylesheet" />
<script src="<{__JS__}>/jquery-1.9.1.min.js"></script>
<script src="<{__JS__}>/jquery.masonry.min.js"></script>
<script src="<{__JS__}>/jquery.infinitescroll.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<style>
img:hover{color:#ff6699}
</style>2、页面布局layout
<div style="display: block" id="container">
<div style="width: auto" id="header">
<div style="width: 933px" class="wrapper"></div>
<div id="flying_shadow_nav"></div>
</div>
<div class="wrapper">
<div id="waterfall">
<{foreach from=$data item="v" key="k"}>
<div class="pin wfc wft">
<div class="actions">
<div class="right">
<a class="like btn btn11 wbtn" onclick="return false;" href="#" data-id="">
<strong>
<em></em>赞</strong>
<span></span>
</a>
</div>
</div>
<a class="img x" href="#" target="_self">
<!--<img alt="世俗男采集到创意搞笑" src="<{$v}>"width="192" height="235">-->
<img alt="<{$v}>" src="<{$v}>" width="192">
<span style="display: none" class="stop"></span>
</a>
<p class="stats less"></p>
</div>
<{/foreach}>
</div>
<div class="loading">
<img src="<{__PUBLIC__}>loading.gif">
<span>正在加载...</span>
</div>
</div>
</div>
<div id="navigation"><a href="<{url}>page.php?page=1"></a></div> page参数自动增加3、jquery
$(function(){
var page = "<{$page}>"; //总页码
var $container = $('.wrapper:eq(1)');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.wfc',
gutterWidth: 15,
columnWidth: 222,
isFitWidth: true,
isAnimated: true,
});
});
$('#waterfall').infinitescroll({
navSelector: "#navigation", //页面分页元素--本页的导航，意思就是一个可以触发ajax函数的模块
nextSelector: "#navigation a", //下一页的导航
itemSelector: ".wfc", //此处我用了类选择器，选择的是你要加载的那一个块（每次载入的数据放的地方）
//debug: true, //启用调试信息
animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
maxPage: page, //最大的页数，也就是滚动多少次停。这个页码必须得要你从数据库里面拿
extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150
bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短
loadingImg : "<{__PUBLIC__}>loding.gif", //加载时候显示的进度条，用户可以自定义
loadingText : "Loading new posts...", //加载时显示的文字
errorCallback: function() {
alert('error');
}, //当出错的时候，比如404页面的时候执行的函数
localMode: true, //是否允许载入具有相同函数的页面，默认为false
dataType: 'json',//可以是json
template: function(data) {
if( data.status )
{
//data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
var content = '';
for (var i = 0; i < data.data.length; i++) {
content +='<div class="pin wfc wft">'
+ '<div class="actions">'
+ ' <div class="right">'
+ '<a class="like btn btn11 wbtn" onclick="return false;" href="#" data-id="60411519"><strong>'
+ '<em></em>赞</strong><span></span></a></div>'
+ '</div>'
+ '<a class="img x" href="/pins/60411519/" target="_self">'
+ '<img alt="强迫症de雨没酱lilith采集到排版" src="'+ data.data[i] +'" width="192" height="301"><span style="display: none" class="stop"></span></a>'
+ '<p class="stats less"></p>'
+ ' </div>';
}
return content;
}
},
loading: {
msgText: "加载中...",
finishedMsg: '没有新数据了...',
selector: '.loading' // 显示loading信息的div
}
}, function(newElems) {
//程序执行完的回调函数
//var $newElems = $(newElems);
//$('.wrapper:eq(1)').masonry('appended', $newElems);
var $newElems = $(newElems).css({ opacity: 0 }).appendTo($('.wrapper:eq(1)'));
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$('.wrapper:eq(1)').masonry( 'appended', $newElems, true );
});
});
})4、后台逻辑代码
header("Content-type: text/html; charset=utf-8");
date_default_timezone_set('PRC'); //设置中国时区
require_once("SmartyConfig.php");
function my_scandir($dir) {
$files = array();
if(is_dir($dir)){
if ( $handle = opendir($dir) ) { //打开目录
while ( ($file = readdir($handle)) !== false ) { //读取文件名
if ( $file != "." && $file != "..") { //排除上级目录 和当前目录，如果是 . 或 .. 则跳过
$files[] = __upload__.$file;
}
}
closedir($handle);
return $files;
}
}
}
$files = my_scandir(__DirImg__); //$files=my_scandir($dirStr);
$showDisplay = 50;
$start = isset( $_REQUEST['start'] ) ? intval( $_REQUEST['start'] ) : 0;
$limit = isset( $_REQUEST['limit'] ) ? intval( $_REQUEST['limit'] ) : $showDisplay;
$data = array_slice($files,$start,$limit);
$count = count($files);
$page = ceil( $count/$limit );
$smarty->assign("data",$data);
$smarty->assign("page",$page);
$smarty->assign("url",url);
$smarty->display("masonry/index.html");分页代码(同上
header("Content-type: text/html; charset=utf-8");
date_default_timezone_set('PRC'); //设置中国时区
require_once("SmartyConfig.php");
function my_scandir($dir) {
global $dirStr;
$files = array();
if(is_dir($dir)){
if ( $handle = opendir($dir) ) { //打开目录
while ( ($file = readdir($handle)) !== false ) { //读取文件名
if ( $file != "." && $file != "..") { //排除上级目录 和当前目录，如果是 . 或 .. 则跳过
// if ( is_dir($dir . "/" . $file) ) { //如果还是文件夹 继续遍历
// //$files[$file] = scandir($dir . "/" . $file);
// $files[$file] = my_scandir($dir . "/" . $file) ;
// }else { //不然就将文件的名字存入数组;
// $files[] = $URL.$dirStr.$file;
// }
$files[] = __upload__.$file;
}
}
closedir($handle);
return $files;
}
}
}
$files=my_scandir(__DirImg__); //$files=my_scandir($dirStr);
$showDisplay = 50;
$page = isset( $_REQUEST['page'] ) ? intval( $_REQUEST['page'] ) : 1;
$limit = isset( $_REQUEST['limit'] ) ? intval( $_REQUEST['limit'] ) : $showDisplay;
$start = ($page-1) * $limit;
$data = array_slice($files,$start,$limit);
if( !empty( $data ) )
{
$arr['data'] = $data;
$arr['status'] = 1;
}
else
{
$arr['status'] = 0;
}
echo json_encode($arr);exit;SmartyConfig.php 配置文件
访问masonry.php即可，还提供了两外两种瀑布流加载方式pinterest.php、waterfall.php
demo示例：链接：http://pan.baidu.com/s/1skXImbN 密码：mamr
本文为崔凯原创文章,转载无需和我联系,但请注明来自冷暖自知一抹茶ckhttp://www.cksite.cn
- 上一篇： php扩展之HTMLPurifier插件
- 下一篇： php滑动拼图验证码(极验)
请先登录后发表评论
- 最新评论
- 总共0条评论
