|
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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; }
#loader { width:100%;height:31px; background:url(h/web/img/loading33_31.gif) 50% 0 no-repeat; position:fixed; bottom:0;left:0;}
</style>
<script type="text/javascript">
function ajax(opt) {
var oAjax = null;
opt.method = opt.method || 'get';
opt.url = opt.url || '';
opt.data = opt.data || '';
opt.dataType = opt.dataType || 'text';
opt.fnSuc = opt.fnSuc || function() {};
if (window.XMLHttpRequest) {
oAjax = new XMLHttpRequest();
} else {
oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
if (opt.method == 'get' && opt.data) {
opt.url += '?' + opt.data;
}
oAjax.open(opt.method, opt.url, true);
if (opt.method == 'get') {
oAjax.send();
} else {
oAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
oAjax.send(opt.data);
}
oAjax.onreadystatechange = function() {
if (oAjax.readyState == 4) {
if (oAjax.status == 200) {
var content = '';
switch(opt.dataType) {
case 'text':
content = oAjax.responseText;
break;
case 'json':
content = JSON.parse(oAjax.responseText);
break;
/*case 'xml':
content = oAjax.responseXML;
break;*/
}
opt.fnSuc(content);
}
}
}
}
</script>
<script type="text/javascript">
function startMove(obj, json, fn) {
clearInterval(obj.iTimer);
var iCur = 0;
var iSpeed = 0;
obj.iTimer = setInterval(function() {
var iBtn = true;
for (var attr in json) {
if (attr == 'opacity') {
iCur = Math.round(css(obj, 'opacity') * 100);
} else {
iCur = parseInt(css(obj, attr));
}
iSpeed = (json[attr] - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != json[attr]) {
iBtn = false;
if (attr == 'opacity') {
obj.style.opacity = (iCur + iSpeed) / 100;
obj.style.filter = 'alpha(opacity='+(iCur + iSpeed)+')';
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
}
if (iBtn) {
clearInterval(obj.iTimer);
fn && fn.call(obj);
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
</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>
<div id="loader">
</div>
</body>
</html>
<script>
var oParent=getByClass('parent')[0];
var oLoader=document.getElementById('loader');
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()
oLoader.style.display='block'; //等待旋转图标
}
};
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
});
oLoader.style.display='none';
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>
|
