类似蘑菇街,美丽说网站的瀑布流
1.定位的瀑布流:
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var aHeight = {L:[],C:[],R:[]};
for(var i=0;i<aLi.length;i++){
var iNow = i%3;
switch(iNow){
case 0:
aLi[i].style.left = '5px';
aHeight.L.push(aLi[i].offsetHeight);
var step = Math.floor(i/3);
if(!step){
aLi[i].style.top = 0;
}
else{
var sum = 0;
for(var j=0;j<step;j++){
sum += aHeight.L[j] + 5;
}
aLi[i].style.top = sum + 'px';
}
break;
case 1:
aLi[i].style.left = '240px';
aHeight.C.push(aLi[i].offsetHeight);
var step = Math.floor(i/3);
if(!step){
aLi[i].style.top = 0;
}
else{
var sum = 0;
for(var j=0;j<step;j++){
sum += aHeight.C[j] + 5;
}
aLi[i].style.top = sum + 'px';
}
break;
case 2:
aLi[i].style.left = '475px';
aHeight.R.push(aLi[i].offsetHeight);
var step = Math.floor(i/3);
if(!step){
aLi[i].style.top = 0;
}
else{
var sum = 0;
for(var j=0;j<step;j++){
sum += aHeight.R[j] + 5;
}
aLi[i].style.top = sum + 'px';
}
break;
}
}
};
2.浮动的瀑布流:
window.onload = function(){
var aUl = document.getElementsByTagName('ul');
var bBtn = true;
window.onscroll = function(){
var veiwHeight = document.documentElement.clientHeight;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
for(var i=0;i<aUl.length;i++){
var aLi = aUl[i].getElementsByTagName('li');
var lastLi = aLi[aLi.length-1];
if(posTop(lastLi) < veiwHeight + scrollY && bBtn){
bBtn = false;
ajax('data.js',function(str){
var json = eval('('+ str +')');
if(json.code){
bBtn = true;
}
for(var i=0;i<json.list.length;i++){
var list = json.list[i];
for(var j=0;j<list.src.length;j++){
var oLi = document.createElement('li');
oLi.innerHTML = '[img]'+ list.src[j] +'[/img]'+ list.title[j] +'
';
aUl[i].appendChild(oLi);
}
}
});
}
}
};
function posTop(obj){
var top = 0;
while(obj){
top += obj.offsetTop;
obj = obj.offsetParent;
}
return top;
}
};
所需测试的json数据:
{
code : 0,
list : [
{src:['img/1.jpg','img/2.jpg','img/3.jpg'],title:['222222222','222222222','222222222']},
{src:['img/4.jpg','img/5.jpg','img/6.jpg'],title:['222222222','222222222','222222222']},
{src:['img/7.jpg','img/8.jpg','img/9.jpg'],title:['222222222','222222222','222222222']}
]
}
分享到:
相关推荐
javascript瀑布流实现的两种方式:固定列数的浮动布局与绝对定位自适应宽度 (1).docx
实现很简单的瀑布流图片,图片高度不一致,用js定位图片位置。
HTML浮动与定位
瀑布流实现的多种方式,js,column-count,浮动,等多种方式实现瀑布流效果,兼容各大浏览器。
瀑布流布局想必大家对它并不陌生吧,在一些网站上都会有这种效果的出现,下面为大家介绍下使用两种方式实现传统多列浮动和绝对定位布局,具体的实现代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的...
屏幕里面的时间轴会跟随着滑动而移动,实现了发表的功能。右下角有一个浮动按钮,点击可出现不同的菜单选择.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
css浮动和定位
CSS元素的浮动与定位综合案例3.pdf 学习资料 复习资料 教学资源
瀑布流-绝对定位布局,与浮动布局的区别在于布局不一样,AJAX不一样
小程序实现瀑布流效果,和web页面差不多,都要经过以下步骤: 1)、加载图片,获取图片的宽高度; 2)、根据页面需要显示几列计算每列的宽度; 3)、根据图片真实宽度和每列的...瀑布流_左浮动</title> <style
HTML页面简单布局,页面布局分布与定位浮动
绝对眼前一亮 页面 浮动层定位 滚动条上下 移动都在同一个位置,jquery实现
利用浮动方式实现图片瀑布流,页面下拉到底部时实现异步加载。
这就是PC端比较常见的瀑布流布局方式,接下来我们审查下元素看看百度图片里面是如何布局: 可以看到,它里面实际是若干个等宽的列容器,通过计算将图片push到不同的容器里。而本文介绍的展示方法是通过定位的方式,...
css知识点,浮动与定位知识点讲解,如有不完整的地方请自行补充,该文档纯属于作者自身学习,巩固知识而写。
用javascript实现浮动广告的2种方法,与网上常用的1种方法的对比。
浮动定位.zip
谈谈对标准流和文档流的理解,标准流有叫做普通流和文档流, 浮动流的理解,标准流就是从左到右,从上到下的布局