您的位置：首页 > 其它

瀑布流

2016-06-28 23:19 218 查看 
<!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" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/js.js" ></script>

<!--[if lt IE 9]>
<script src="<?php bloginfo('template_url'); ?>/js/css3-mediaqueries.js"></script>
<![endif]-->

<script type="text/javascript">
$(window).load(function() {
waterfall('maincontentbox','article');
});

$(window).resize(function(){
//resize要重置元素的css属性，因为自动排序会根据第一排的元素去位置去计算后面的位置，而当第一排只有三个，转换的4个的时候，第4个位置不正确，导致后面计算都是不正确的，所以要重置css属性后在重新计算
$(".article").each(function(){
$(this).css({"position":"static"});
$(this).css({"left":"auto"});
$(this).css({"top":"auto"});
});
waterfall('maincontentbox','article');
});
// 给浏览器窗口绑定 scroll 事件
$(window).bind("scroll",function(){
// 固定值，距离底部200就加载
/*
if( $(document).scrollTop() + $(window).height() > $(document).height() -200) {
loadart();
}*/
//最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载
if(checkscrollside()){
loadart();
}
});

var timestamplast=0;
function loadart(){
var timestampnow=new Date().getTime();
if(timestampnow-timestamplast>1000){
timestamplast=timestampnow;
$("#pagenavi a").addClass('loading').text('LOADING...');
$.ajax({
type: "POST",
url: $("#pagenavi a").attr("href") + "#infolist",
success: function(data){
result = $(data).find("#maincontentbox .article");
nextHref = $(data).find("#pagenavi a").attr("href");
// 渐显新内容
$("#infolist").append(result.fadeIn(300));
waterfall('maincontentbox','article');
$("#pagenavi a").removeClass("loading").text("");
if ( nextHref != undefined ) {
$("#pagenavi a").attr("href", nextHref);
} else {
// 若没有链接，即为最后一页，则移除导航
$("#pagenavi a").remove();
$("#pagenavi").addClass('loading').text('THE END..');
}
}
});
}else{
//alert("屏蔽滚动条多次不正常触发");
}
}
//用js移除原有的导航，不移除，相近色,网速慢的时候css没加载好会出问题，还是移除
$("#forturnpagelayout").remove();
</script>

<title>首页设计</title>
</head>

<body>
<!--navfirstcon-->
<div id="navfirstcon">
<div id="navfirstbox">
<div id="logo"><img id="img0" onclick="aa()" src="<?php bloginfo('template_url'); ?>/images/logo.png" /></div>
<div id="slogan">欢迎来到&nbsp;<h1><a href="http://www.sj945.com/">电商设计网</a></h1>。</div>
<div id="menufirst">
<dl>
<dt><img src="images/cat.png" /></dd>
<dd class="menufirstli">作品分享</dd>
<dd class="menufirstli">经验分享</dd>
<dd class="menufirstli">我接单</dd>
</dl>
</div>
</div>
</div>
<!--navfirstconend-->
<div class="clear"></div>

<!--maincontentcon-->
<div id="maincontentconindex">
<div id="maincontentbox">
<div id="infolist">
<?php
// $paged=10;
$page_num = $paged;
if ($pagenum='') $pagenum =1;
query_posts('showposts=10&paged='.$page_num);
if (have_posts()) : while (have_posts()) : the_post();
?>
<div id="article" class="article">
<div class="articlecover">

<a href="<?php the_permalink(); ?>" target="_blank">

<img src="<?php bloginfo('template_url'); ?>/images/a.jpg" width="264" height="<?php echo rand(100,500) ?>" />

</a>
</div>
<div class="articletitle"><a href="#"><h2><?php the_title();echo $paged; ?></h2></a></div>
<div class="articleproperty">
<?php echo get_avatar( get_the_author_email(), '20' ); ?>
<span class="articlepropertyspan1"><?php the_author(); ?></span>
<span class="articlepropertyspan2"><?php the_time('Y-m-d'); ?></span>
</div>
</div>
<?php endwhile;endif; ?>
</div>
<div class="clear"></div>
</div>
</div>
<!--maincontentconend-->
<div class="clear"></div>
<!--turnpagecon-->

<div id="turnpagecon">
<div id="turnpagebox">
<div id="forturnpagelayout">
<?php  pagenavi(); ?>
</div>
</div>
</div>
<!--turnpageconend-->

<!--bottomcontentcon-->
<div id="bottomcontentcon">
<div id="bottomcontentbox">
<div id="hotinfo">
<div id="hotinfoheader">
<div id="hotinfotitle"></div>
<div id="hotinfomore"></div>
</div>
<div id="hotinfolist"></div>
</div>
<div id="ad3"></div>
<div id="ad4"></div>
</div>
</div>
<!--bottomcontentconend-->
<!--ajaxloadart-->
<div  id="ajaxloadart">
<div id="pagenavi"><?php next_posts_link(('')); ?></div>
</div>
<!--ajaxloadartend-->
</body>
</html>

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航