本文目录一览：
- 1、dede织梦标签使用哪个可以调用图片瀑布流？
- 2、织梦首页如何实现点击加载更多
- 3、织梦首页如何实现图片瀑布流效果
- 4、dedecms arcurl 不用标签怎么自己写，请大牛指教 ！！！
- 5、无限加载瀑布流在dedecms里如何使用，300分求助
dede织梦标签使用哪个可以调用图片瀑布流？
编写调用代码
先默认显示15条，你也可以默认显示更多
{dede:arclist row="15" imgwidth='80' imgheight='60' titlelen='60' orderby="id" orderway="DESC"}
a href="[field:arcurl/]" class="list-item-box" title="[field:title/]"
dl class="list-item"
dt class="pic"[field:image/]/dt
dddiv class="news-info"
div class="news-title"[field:title/]/div
div class="news-info-bottom"
span[field:typename/]/spanspan class="news-date"[field:pubdate function="MyDate('m月d日 H:s',@me)"/]/span
/div
/div
/dd
/dl
/a
{/dede:arclist}
编写服务器端调用代码(一)获取数据
我们打开plus目录下的list.php文件，在require_once(dirname(__FILE__)."/../include/common.inc.php");这段代码的事后面写上以下代码
if(isset($_GET['ajax'])){
$typeid = isset($_GET['typeid']) ? intval($_GET['typeid']): 0;//传递过来的分类ID
$page = isset($_GET['page']) ? intval($_GET['page']): 0;//页码
$pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 15;//每页多少条，也就是一次加载多少条数据
$start = $page0 ? ($page-1)*$pagesize : 0;//数据获取的起始位置。即limit条件的第一个参数。
$typesql = $typeid ? " WHERE typeid='$typeid" : '';//这个是用于首页实现瀑布流加载，因为首页加载数据是无需分类的，所以要加以判断，如果无需
$total_sql = "SELECT COUNT(id) as num FROM `dede_archives` $typesql ";
$temp = $dsql-GetOne($total_sql);
$total = 0;//数据总数
$load_num =0;
if(is_array($temp)){
$load_num= round(($temp['num']-15)/$pagesize);//要加载的次数,因为默认已经加载了
$total = $temp['num'];
}
$sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath
FROM `dede_archives` as a JOIN `dede_arctype` AS t ON a.typeid=t.id $typesql ORDER BY id DESC LIMIT $start,$pagesize";
$dsql-SetQuery($sql);
$dsql-Execute('list');
$statu = 0;//是否有数据，默认没有数据
$data = array();
}
编写服务器端调用代码(二)返回数据
我们在第三步的逻辑代码中加入以下代码
$index = 0;
while($row = $dsql-GetArray("list")){
$row['info'] = $row['info'] = $row['infos'] = cn_substr($row['description'],160);
$row['id'] = $row['id'];
$row['filename'] = $row['arcurl'] = GetFileUrl($row['id'],$row['typeid'],$row['senddate'],$row['title'],$row['ismake'],
$row['arcrank'],$row['namerule'],$row['typedir'],$row['money'],$row['filename'],$row['moresite'],$row['siteurl'],$row['sitepath']);
$row['typeurl'] = GetTypeUrl($row['typeid'],$row['typedir'],$row['isdefault'],$row['defaultname'],$row['ispart'],
$row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']);
if($row['litpic'] == '-' || $row['litpic'] == ''){
$row['litpic'] = $GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';
}
if(!preg_match("#^http:\/\/#i", $row['litpic']) $GLOBALS['cfg_multi_site'] == 'Y'){
$row['litpic'] = $GLOBALS['cfg_mainsite'].$row['litpic'];
}
$row['picname'] = $row['litpic'];//缩略图
$row['stime'] = GetDateMK($row['pubdate']);
$row['typelink'] = "a href='".$row['typeurl']."'".$row['typename']."/a";//分类链
$row['fulltitle'] = $row['title'];//完整的标题
$row['title'] = cn_substr($row['title'], 60);//截取后的标题
$data[$index] = $row;
$index++;
}
if(!empty($data)){
$statu = 1;//有数据
}
$result =array('statu'=$statu,'list'=$data,'total'=$total,'load_num'=$load_num);
echo json_encode($result);//返回数据
exit();
编写js代码-配置信息
var loadConfig = {
url_api:'',//服务端处理路径
typeid:0,//分类
page:2,//开始页码
pagesize:15,//分页数
loading : 0,//加载状态,默认为未加载
}
编写js代码-滚动处理函数
function loadMoreApply(){
//如果未加载数据，就加载
if(loadConfig.loading == 0){
var typeid = loadConfig.typeid;
var page = loadConfig.page;
var pagesize = loadConfig.pagesize;
var url = loadConfig.url_api,data:{ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize};
var sTop = document.body.scrollTop || document.documentElement.scrollTop, dHeight = $(document).height(), cHeight = document.documentElement.clientHeight;
//当滚动条高度加上浏览器可视区域高度大于等于文档高度减去浏览器可视区域高度时，就加载。文档高度减去浏览器可视区域高度，就是可以滚动条可以滚动的高度
if (sTop + cHeight = dHeight - cHeight) {
loadConfig.loading = 1;//将加载状态改为已加载
function ajax(url, data) {
$.ajax({url: url,data: data,async: false,type: 'GET',dataType: 'json',success: function(data) {
addContent(data);
}});
}
ajax(url,data);
}
}
}
编写js代码-html处理函数
function addContent (rs){
if(rs.statu== 1){
var data = rs.list;
var total = rs.total;
loadConfig.load_num = rs.load_num;//加载次数，按道理应该在第五步就已经获取到加载次数和数据总数的
var arr=[];
var length = data.length;
for(var i=0;ilength;i++){
arr.push('a href="'+data[i].arcurl+'" class="list-item-box" title="'+data[i].title+""');
arr.push('dl class="list-item"');
arr.push('dt class="pic"img src="'+data[i].picname+"" width="80" height="60"//dt');
arr.push('dddiv class="news-info"');
arr.push('div class="news-title"'+data[i].title+'/div');
arr.push('div class="news-info-bottom"');
arr.push('span'+data[i].typename+'/spanspan class="news- date"'+data[i].pubdate+'/span');
arr.push('/div/dd/dl/a');
}
$('.list-zone').append(arr.join(''));
if(totalloadConfig.page*loadConfig.pagesize || loadConfig.page loadConfig.load_num){
//如果当前页码大于加载的总次数
window.removeEventListener('srcoll',loadMoreApply,false);
}
loadConfig.page++;递增页码
loadConfig.loading = 0;//加载完毕后，把加载状态改为0
}
}
编写js-绑定scroll事件
window.addEventListener('scroll', loadMoreApply, false);
测试结果
打开浏览器的开发工具，切换到网络选项，我们尝试着把滚动条拉到最底部，
你会在开发工具的面板中看到网页发送了一条get请求，我们看一下有没有获取到数据。注意，如果你的滚动条滚到了最底部，刷新页面时，网页就已经发一条加载请求。如果你觉得很别扭，你可以初始化滚动条的高度为0.
织梦首页如何实现点击加载更多
这个属于瀑布流特效，需要用到js。代码太长这里粘贴不下，建议你搜“瀑布流特效”“无限加载特效”“点击加载更多特效”，有现成的例子。
织梦首页如何实现图片瀑布流效果
图片列表
div id="mynews"
li class='col'............/li
li class='col'............/li
li class='col'............/li
li class='col'............/li
li class='col'............/li
...
...
/div
图片列表后加上图片翻页代码,必须要有下一页的链接，才能在滚动页面时候自动把下一页图片补充到当前页
div class="dede_pages"
ul id="pagelist"
li id="nx"a href="index2.html"/a/li
/ul
/div
使用masonry插件,在页面/body之前加以下代码
script type="text/javascript" src="/images/js/jquery.masonry.min.js"/script
script type="text/javascript" src="/images/js/jquery.infinitescroll.min.js"/script
script language="javascript" type="text/javascript"
$(function(){
//使用masonry插件
var $container = $('#mynews');//#mynews是你首页这堆图片的容器id
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.col',
columnWidth : 242,
isAnimated: true
});
});
$container.infinitescroll({
navSelector : '#pagelist', // selector for the paged navigation
nextSelector : '#nx a', // selector for the NEXT link (to page 2)
itemSelector : '.col', // selector for all items you'll retrieve
extraScrollPx: 250, //离网页底部多少像素时触发ajax
donetext : 'No more pages to load.',
loadingImg : '',
debug: true,
errorCallback: function() {
// fade out the error message after 2 seconds
$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
}
},
// call Masonry as a callback
function( newElements ) {
var $newElems = $( newElements );
// position elements at the bottom center
$newElems.css({
left: $container.width() / 2,
top: $container.height(),
})
// pause so it appears new items get added from bottom
setTimeout( function(){
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$container.masonry( 'appended', $newElems );
});
}, 10 );
}
);
});
/script
参考
dedecms arcurl 不用标签怎么自己写，请大牛指教 ！！！
这个给你参考，要调用织梦原来的函数GetTypeUrl需要用到两个表的数据，栏目表和文章公用表
下面这个例子是利用已知的tag查询出对应的文章列表，里面就有你要用到的链接
{dede:sql sql="Select a.*,c.namerule,c.typedir,c.moresite,c.siteurl,c.sitepath from dede_archives as a left join dede_taglist as b on a.id=b.aid left join dede_arctype as c on a.typeid=c.id where b.tag='google' ORDER BY id limit 0,100"}
lia href="[field:array runphp='yes']@me=GetFileUrl(@me['id'],@me['typeid'],@me['senddate'],@me['title'],@me['ismake'],@me['arcrank'],@me['namerule'],@me['typedir'],@me['money'],@me['filename'],@me['moresite'],@me['siteurl'],@me['sitepath']);[/field:array]"[field:title/]/li
{/dede:sql}
无限加载瀑布流在dedecms里如何使用，300分求助
织梦有无限加载瀑布流类的源码和模板，你可以研究一下。给你发一款瀑布流的图片源码，
