phpcmsV9实现文章列表页瀑布流效果的模板

本文介绍了phpcmsV9实现文章列表页瀑布流效果的模板，先下载教程给出的插件，覆盖到网站目录，然后根据教程给出的方法使用就可以了。

下面齐鲁建站就和大家分享下phpcmsV9实现文章列表页瀑布流效果的模板。

直接下载代码：https://pan.baidu.com/s/1iAFN5R5rrzgsv4qCj-RJ0A   提取码：i0fc

实现教程：

瀑布流的主体即为几个ul标签，新增加的元素以 li的形式按照当前 ul的高度有选择性的插入到某个ul下。

主体形式如下：

复制代码代码如下:

<div id="main">

　　<ul class="pics">

　　　　<li> <div class="pic"><img /></div> <div class="content">anytext..</div> </li>

　　　　<li><div class="pic"><img /></div> <div class="content">anytext..</div> </li>

　　　　...

　　</ul>

　　<ul class="pics"> <li> <div class="pic"><img /></div> <div class="content">anytext..</div> </li>

　　　　<li><div class="pic"><img /></div> <div class="content">anytext..</div> </li>

　　　　...

　　</ul>

　　....

</div>

css定义如下：

复制代码代码如下:

.pics {

　　　　 float:left;

　　　　 list-style:none;

　　　　 margin-left:10px;

　　　　 margin-right:10px;

　　　　 width:230px;

}

.pics li {

　　　　 display:block;

　　　　 width:100%;

　　　　 margin:0 auto;

　　　　 margin-bottom:10px;

　　　　 position:relative;

　　　　 background-color:#FFF;

　　　　 box-shadow: 0 1px 2px 0;

　　　　 padding-top:10px;

}

.pic {

　　　　 width:92%; margin:0 auto;

　　　　 padding-top:10px;

　　　　 text-align:center;

　　　　 font-size:180px;

　　　　 background-color:#0CF;

}

.pic img {

　　　　 width:100%;

　　　　 margin:0 auto;

}

.content {

　　　　 width:92%;

　　　　 margin:0 auto;

　　　　 padding-top:10px;

　　　　 height:50px;

　　　　 text-overflow:ellipsis;

　　　　 white-space:nowrap;

　　　　 overflow:hidden;

}

脚本实现如下：

复制代码代码如下:

$(function(){

//alert($(window).height()); 浏览器当前窗口可视区域高度

//alert($(document).height());

//浏览器当前窗口文档的高度 alert($(document.body).height());

//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));

//浏览器当前窗口文档body的总高度 包括border padding margin alert($(window).width());

//浏览器当前窗口可视区域宽度 alert($(document).width());

//浏览器当前窗口文档对象宽度 alert($(document.body).width());

//浏览器当前窗口文档body的高度 alert($(document.body).outerWidth(true));

//浏览器当前窗口文档body的总宽度 包括border padding margin

$(document).scroll(function(){

var pics=$(".pics");

var sc=$(document).scrollTop();

$("#float").text(sc);

for(var i=0;i<pics.length;i++){

var pic=pics.eq(i);

var bottom =pic.offset().top+pic.height();

if((sc+$(window).height())>=bottom){

eval( "var word=" + '"\\u' + (Math.round(Math.random() * 20901) + 19968).toString(16)+'"');

var li="<li> <div class='pic'>"+word+"</div><div class='content'>梦里过客笑眼望，望回廊，秋螽藏</div></li>";

pic.append(li);

}

}

});

});

这样做基本实现了最简单的一个瀑布流，但是脚本中并没有考虑内存消耗，即无限加载的问题。