瀑布流

最新推荐文章于 2024-09-12 23:00:00 发布

HandsomeOhJie

最新推荐文章于 2024-09-12 23:00:00 发布

阅读量152

点赞数

分类专栏： php页面文章标签： php xhtml javascript ViewUI

本文链接：https://blog.csdn.net/HandsomeOhJie/article/details/84808028

版权

php页面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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" οnclick="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>