<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>前端开瀑布流效果—lvhui.org</title>
<style>
body,ul,p,h2,h3{margin:0;padding:0;}
li{list-style:none};
a {text-decoration:none;}
h3 {font:14px "微软雅黑";}
strong { font-weight:normal; font-size:12px; color:#808080;height:24px; line-height:24px; float:left; padding:0 7px; cursor:pointer;}
.clear{zoom:1}
.clear:after{content:"";display:block;clear:both;}
.parent{width:1000px; overflow:hidden; margin:50px auto 0;}
.parent li { width:240px; float:left;margin-right:10px;overflow:hidden;}
.parent li div[class='tag']{width:229px;border:1px solid #b6b6b6; margin-bottom:10px; border-top:4px solid #6f6f6f; padding:12px 0 0 9px;}
.parent li:first-child a{ background:#f0f0f0; text-decoration:none; margin:4px 5px 5px 0;display:inline-block; height:22px; line-height:22px; font-size:12px; color:#a0a0a0; padding:0 10px; border:1px solid #e2e2e2; border-radius:20px;}
.parent li:first-child a:nth-of-type(1) { background:#ff9231; color:#fff;}
.parent li:last-child{margin-right:0;}
.parent li div[class='boBtn'] { width:221px; margin:10px 0 0 -10px; padding-top:17px;}
.parent li div[class='boBtn'] div {margin-bottom:10px;}
.parent li div[class='boBtn'] p{ float:left; height:24px; line-height:24px; background:#fefefe;margin-bottom:6px; border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px; border:1px solid #ddd; overflow:hidden;}
.parent li div[class='boBtn'] span { float:left; padding:0 10px; font-size:12px; height:24px; line-height:24px;}
.active { background:#ff9231; color:#fff;}
.parent .pic {margin-bottom:10px; border:1px solid #dadada; overflow:hidden; }
.parent .pic h3 { padding-top:5px;height:20px; line-height:20px; text-align:center; color:#00c0ff; text-shadow:1px 1px 3px rgba(255,255,255,.5)}
.parent .pic p { font-size:12px; color:#aaa;padding:5px 10px; text-indent:2em; line-height:20px; background:#fbfbfb;color:#aaa;}
img { width:240px; border:none; vertical-align:top; }
</style>
<script src="js/ajax2.js" type="text/javascript"></script>
<script src="js/move.js" type="text/javascript"></script>
</head>
<body>
<ul class="parent clear">
<li>
<div class="tag">
<a href="#">全部</a>
<a href="#">连衣裙</a>
<a href="#">夏装</a>
<a href="#">雪纺</a>
<a href="#">东大门</a>
<a href="#">半身裙</a>
<a href="#">短裙</a>
<a href="#">长裙</a>
<a href="#">衬衫</a>
<a href="#">T恤</a>
<a href="#">韩版</a>
<a href="#">帮我挑</a>
<a href="#">9块9也能穿</a>
<a href="#">50元美衣</a>
<a href="#">裤子</a>
<a href="#">打底裤</a>
<a href="#">内衣</a>
<a href="#">混搭</a>
<a href="#">印花</a>
<a href="#">牛仔</a>
<a href="#">比基尼</a>
<a href="#">蕾丝</a>
<a href="#">八卦穿搭</a>
<a href="#">印花</a>
<a href="#">知识库</a>
<div class="boBtn">
<div class="clear"><span>分类</span><p><strong>全部</strong><strong>宝贝</strong><strong class="active">文章</strong><strong>专辑</strong></span></p></div>
<div class="clear"><span>排行</span><p><strong>最热</strong><strong class="active">最新</strong></span></p></div>
</div>
</div>
</li>
<li>
<!--<div class="pic">
<img src="img/4.jpg" />
<h3>dang0529加入夏天就要穿裙...</h3>
<p>圆领简单舒适，加上金属的配饰，打破常规，不觉得单调，更显出独特的性格，高贵优...</p>
</div>-->
</li>
<li></li>
<li></li>
</ul>
</body>
</html>
<script>
var oParent=getByClass('parent')[0];
var aLi=oParent.getElementsByTagName('li');
var iPage=1;
var iOpen=true;
function fnMove() { //鼠标经过图片透明度变化
var aDiv=getByClass('pic');
for(var i=0;i<aDiv.length;i++) {
var oImg=aDiv[i].getElementsByTagName('img')[0];
oImg.onmouseover=function() {
this.style.filter='alpha(opacity:60)';
this.style.opacity=0.6;
}
oImg.onmouseout=function() {
this.style.filter='alpha(opacity:100)';
this.style.opacity=1;
}
}
}
showList(); //初始化加载第一批图片
window.onscroll=function() {
var _index= iMin(); //最小高度li的下标
var oLi=aLi[_index]; //最小高度的li
var ih=pos(oLi)+oLi.offsetHeight;
if(ih<(viewH()+scrollY())) {
showList()
}
};
function showList() {
if(!iOpen) return;
iOpen=false;
iPage++;
//document.title=iPage; 测试加载到第几批数据
ajax({
url : 'js/getPics.php',
data : 'cpage=' + iPage,
dataType: 'json',
fnSuc:function(j) {
if(j.code==0) {
var w=j.data.data;
var i=0;
function show1() {
var oDiv=document.createElement('div');
var oImg=document.createElement('img');
var oH3=document.createElement('h3');
var oP=document.createElement('p');
oDiv.className='pic';
oH3.innerHTML=w[i].favContAlbum || w[i].title || '暂无信息';
oP.innerHTML=w[i].favContTitle || '暂无介绍';
oDiv.appendChild(oImg);
oDiv.appendChild(oH3);
oDiv.appendChild(oP);
oImg.src='';
aLi[iMin()].appendChild(oDiv);
fnMove();//调用经过事件
if(w[i].imageUrl) {
oImages=new Image();
oImages.onload=function() {
oImg.src=this.src;
oImg.style.filter='alpha(opacity:0)'; //图片加载完成时，进行透明度变化
oImg.style.opacity=0;
startMove(oImg,{
opacity:100
});
if(i<w.length-1) {
i++
show1();
}else {
iOpen=true;
}
}
oImages.src=w[i].imageUrl;
}else { //当图片加载失败走这里
if(i<w.length-1) {
i++
show1();
}else {
iOpen=true;
}
}
}
show1();
}else { // if(code==0)结尾
return;
}
}
})
}
//函数封装
function iMin() {
var ih=aLi[0].offsetHeight;
var _index=0;
for(var i=1;i<aLi.length;i++) {
if(ih>aLi[i].offsetHeight) {
ih=aLi[i].offsetHeight;
_index=i;
}
}
return _index;
}
function getByClass(sClass,parent) {
var aEle=(parent || document).getElementsByTagName('*')
var arr=[];
var re=new RegExp('\\b' + sClass + '\\b');
for(var i=0;i<aEle.length;i++) {
if(re.test(aEle[i].className)) {
arr.push(aEle[i]);
}
}
return arr;
}
function pos(obj) {
var iTop=0;
while(obj) {
iTop +=obj.offsetTop;
obj=obj.offsetParent;
}
return iTop;
}
function viewH() {
return document.documentElement.clientHeight;
}
function scrollY() {
return document.documentElement.scrollTop || document.body.scrollTop;
}
</script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流demo</title>
<style type="text/css">
body,div,a,img{
margin: 0;
padding: 0;
list-style: none;
font: bold 12px "微软黑体";
}
.container{
position: absolute;
top: 0;
}
.imgShow{
position: absolute;
border: solid 1px #ccc;
padding: 10px ;
width: 300px;
top: 0px;
left: 0px;
-webkit-transition: all .7s ease-out .1s;
-moz-transition: all .7s ease-out .1s;
-o-transition: all .7s ease-out .1s;
transition: all .7s ease-out .1s
}
img{
width: 100%;
}
</style>
</head>
<body >
<div class="container">
<div class="imgShow"><a href="images/temp_img02.jpg"><img src="images/temp_img02.jpg"/></a>
</div>
<div class="imgShow"><a href="images/temp_img03.jpg"><img src="images/temp_img03.jpg"/></a>
</div>
<div class="imgShow"><a href="images/temp_img04.jpg"><img src="images/temp_img04.jpg"/></a>
</div>
<div class="imgShow"><a href="images/temp_img05.jpg"><img src="images/temp_img05.jpg"/></a>
</div>
<div class="imgShow"><a href="images/temp_img06.jpg"><img src="images/temp_img06.jpg"/></a>
</div>
<div class="imgShow"><a href="images/temp_img07.jpg"><img src="images/temp_img07.jpg"/></a>
</div>
<div class="imgShow"><a href="images/temp_img08.jpg"><img src="images/temp_img08.jpg"/></a>
</div>
<div class="imgShow"><a href="images/temp_img09.jpg"><img src="images/temp_img09.jpg"/></a>
</div>
<div class="imgShow"><a href="images/temp_img10.jpg"><img src="images/temp_img10.jpg"/></a>
</div>
<div class="imgShow"><a href="images/temp_img11.jpg"><img src="images/temp_img11.jpg"/></a>
</div>
<div class="imgShow"><a href="images/temp_img12.jpg"><img src="images/temp_img12.jpg"/></a>
</div>
<div class="imgShow"><a href="images/temp_img13.jpg"><img src="images/temp_img13.jpg"/></a>
</div>
<div class="imgShow"><a href="images/temp_img14.jpg"><img src="images/temp_img14.jpg"/></a>
</div>
<div class="imgShow"><a href="images/temp_img15.jpg"><img src="images/temp_img15.jpg"/></a>
</div>
</div>
<script type="text/javascript">
document.getElementsByClassName = function(className, tag, elm) {
var testClass = new RegExp("(^|\s)" + className + "(\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}
var margin = 10;
var boxes = document.getElementsByClassName('imgShow');
var con = document.getElementsByClassName('container');
var text = document.getElementsByTagName('h4');
var boxWidth = boxes[0].offsetWidth+margin;
function show () {
var columnHeight=[];
var bodyWidth = document.body.offsetWidth;
var n = parseInt(bodyWidth/boxWidth);
var columnNum = n==0?1:n;
var bodyLeft = bodyWidth>=boxWidth?bodyWidth-columnNum*boxWidth:0;
con[0].style.left = parseInt(bodyLeft/2)-margin/2+'px';
for (var i = 0,l=boxes.length; i <l ; i++) {
if (i<columnNum) {
columnHeight[i]=boxes[i].offsetHeight+margin;
boxes[i].style.top = 0;
boxes[i].style.left = i*boxWidth+margin+'px';
} else{
var innsertColumn = min(columnHeight),
imgHeight = boxes[i].offsetHeight+margin;
boxes[i].style.top = columnHeight[innsertColumn]+'px';
boxes[i].style.left = innsertColumn*boxWidth+margin+'px';
columnHeight[innsertColumn] +=imgHeight;
};
};
};
function min (heightAarry) {
var minColumn = 0;
var minHeight = heightAarry[minColumn];
for (var i = 1,len=heightAarry.length; i < len; i++) {
var temp = heightAarry[i];
if (temp < minHeight) {
minColumn = i;
minHeight = temp;
};
};
return minColumn;
}
window.onload = function(){show();};
window.onresize = function(){show();};
</script>
</body>
</html>
