{template "content","cheader"}
<!--body -->
<div id="contentPicList" style="margin:0px auto">
	<div style="float:left; margin-top:3px;">
		<ul id="stage" >
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
         </ul>
	</div>
	<div style="float:left">
		<ul style="width:100%; margin-top:8px;">
			{pc:content  action="hits" catid="17" num="10" order="views DESC" cache="3600"}
				{loop $data $r}
					<li style="margin:0; padding:0; list-style:none; width:300px">
					<div style="border:1px solid #cccccc; margin:5px 5px; background-color:#fff;padding:12px;">
					<div><a href="{$r[url]}" target="_blank" title="{$r[title]}" style="font-size:14px;font-family:腾祥嘉丽中圆简; color:#000">{str_cut($r[title], 28, '')}</a></div>
					<div style="margin-top:5px;"><a href="{$r[url]}" target="_blank" title="{$r[title]}"><img src="{$r[thumb]}" width='260' height='150' style="border:0px"  /></a></div>
					<div style="margin-top:3px; font-size:10px;line-height:20px;color:#999999">{$r[description]}</div>
					</div>
					</li>
				{/loop}
			{/pc}
         </ul>
	</div>
	<div style="clear:both"></div>
</div>
<!--body -->

</body>
</html>

 <script>
/*
 *  Javascript文件：waterfall.js
 */
$(function(){
     jsonajax();
 });
 
 //这里就要进行计算滚动条当前所在的位置了。如果滚动条离最底部还有100px的时候就要进行调用ajax加载数据
 $(window).scroll(function(){    
     //此方法是在滚动条滚动时发生的函数
     // 当滚动到最底部以上100像素时，加载新内容
     var $doc_height,$s_top,$now_height;
     $doc_height = $(document).height();        //这里是document的整个高度
     $s_top = $(this).scrollTop();            //当前滚动条离最顶上多少高度
     $now_height = $(this).height();            //这里的this 也是就是window对象
     if(($doc_height - $s_top - $now_height) < 100) jsonajax();    
 });
 
 
 //做一个ajax方法来请求data.php不断的获取数据
 var $num = 0;
 function jsonajax(){
     $.ajax({
         url:'/install_package/ajax/data.php',
         type:'POST',
         data:"catid=17"+"&num="+$num++,
         dataType:'json',
         success:function(json){
             if(typeof json == 'object'){
                 var neirou,$row,iheight,temp_h;
                 for(var i=0,l=json.length;i<l;i++){
                     neirou = json[i];    //当前层数据
                     //找了高度最少的列做添加新内容
                     iheight  =  -1;
                     $("#stage li").each(function(){
                         //得到当前li的高度
                         temp_h = Number($(this).height());
                         if(iheight == -1 || iheight >temp_h){
                             iheight = temp_h;
                             $row = $(this); //此时$row是li对象了
                         }
                     });
                     $item = $('<div style="border:1px solid #cccccc; margin:5px 5px; background-color:#fff"><div style="font-size:20px;color:#555555;font-family:腾祥嘉丽中圆简; margin-top:-5px;">'+neirou.title+'</div><div style="margin-top:-10px"><a href="'+neirou.url+'" target="blank"><img src="'+neirou.thumb+'" width="600" height="280" border="0" ></a></div><div style="margin-top:-10px" >'+neirou.description+'</div><div style="text-align:right;color:red"><a href='+neirou.url+' target="_blank" style="color:red" >阅读全文</a></div>'+'</div>').hide();
                     $row.append($item);
                     $item.fadeIn();
                 }
             }
         }
     });
 }
</script>
<style>
#stage{ width:100%}
#stage li{ margin:0; padding:0; list-style:none; width:660px;}
#stage li div{ font-size:12px; padding:10px; color:#999999; text-align:left; line-height:20px; }
</style>