JavaScript实现循环渐近瀑布流效果Word文件下载.docx
- 文档编号:18814652
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:12
- 大小:2.72MB
JavaScript实现循环渐近瀑布流效果Word文件下载.docx
《JavaScript实现循环渐近瀑布流效果Word文件下载.docx》由会员分享,可在线阅读,更多相关《JavaScript实现循环渐近瀑布流效果Word文件下载.docx(12页珍藏版)》请在冰豆网上搜索。
box1"
imgsrc="
image/01.jpg"
/div>
--把Box复制多份,这里因为代码重复省略了-->
/body>
/html>
效果:
(未设置css属性所以都是垂直放置的)
2.通过css简单设置样式
主要设置水平放置,相框颜色,边界之类的
/*
边界不留空,背景黑灰
*/
body{
margin:
0px;
background:
darkgray;
}
总布局设置为相对布局
.container{
position:
relative;
设置box属性
.box{
padding:
5px;
float:
left;
/*设置图片边框阴影和圆角
.box_border{
border:
1pxsolid#cccccc;
box-shadow:
0px0px5px#ccc;
border-radius:
/*设置图片格式*/
.box_borderimg{
width:
150px;
height:
auto;
(边框什么都有了)
3.JS控制每一行所摆放的图片个数
上面的css布局之后,浏览器窗口大小改变,里面的图片数量也会改变,现在要用JS固定住每一行的图片数量,对于不同尺寸的屏幕都能做到很好的效果
用于加载其他函数
window.onload=function(){
setImgLocation("
);
设置图片个数
functionsetImgLocation(parent){
varcparent=document.getElementById(parent);
//得到父节点
varchildArray=getChildNodes(cparent);
//得到图片数量
varimgWidth=childArray[0].offsetWidth;
//获取照片宽度
varscreenWidth=document.documentElement.clientWidth;
//获取浏览器宽度
varcount=Math.floor(screenWidth/imgWidth);
//每行的个数
cparent.style.cssText="
"
+count*imgWidth+"
px;
0auto;
;
//设置其宽度并居中
获取全部图片的个数
functiongetChildNodes(parent){
varchildArray=[];
//定义一个数组存放图片box
vartempNodes=parent.getElementsByTagName("
*"
//获取父节点下的所有节点
//循环添加class为box的节点
for(vari=0;
i<
tempNodes.length;
i++){
if(tempNodes[i].className=="
){
childArray.push(tempNodes[i]);
returnchildArray;
//返回所有的子节点
效果图:
针对不同屏幕大小显示的个数是不一样的
4.JS实现静态瀑布流
先实现静态的布局,也就是浏览器下拉不会自动刷新出新的图片.
实现排列算法很简单
1.把第一排图片的高度全部存到一个数组
2.计算出第一排中的图片的最小高度和对应位置
3.把第一排之后的第一个图片放到该位置上
4.重新设置该位置的高度为两个图片相加
5.循环2剩余全部图片
代码:
设置图片个数及位置排列
//定义数组,存放第一行照片高度
varimgHArray=[];
//循环遍历图片
for(vari=0;
childArray.length;
//如果图片在第一行则获取高度
if(i<
count){
imgHArray[i]=childArray[i].offsetHeight;
}else//否则把最小高度的填充剩余图片
{
varminHeight=Math.min.apply(null,imgHArray);
//获取最小高度
varminIndex=getMinIndex(minHeight,imgHArray);
//获取最小高度对应的下标
childArray[i].style.position="
absolute"
//设置要填充的图片盒子为绝对布局,否则不能更换位置
childArray[i].style.top=minHeight+"
px"
//设置要填充图片距顶高度
childArray[i].style.left=childArray[minIndex].offsetLeft+"
//设置要填充图片距左高度
imgHArray[minIndex]+=childArray[i].offsetHeight;
//填充后把当前位置高度设为两个图片相加
//开始下一轮循环
获取最小高度对应的下标
functiongetMinIndex(minHeight,imgHArray){
for(variinimgHArray){
if(imgHArray[i]==minHeight){
returni;
5.js实现动态加载
动态加载也就是滚动条永远滑不到底部,要解决动态加载我们需要考虑两个问题:
1.什么时候加载?
滑动距离+浏览器高度>
最后一张图片距离顶部的距离
2.怎样加载?
通过创建新的节点,把创建的节点添加进去即可
最终代码:
window.onload=function(){
varcparent=document.getElementById("
setImgLocation(cparent);
//设置加载的图片
vardata=["
"
image/02.jpg"
image/03.jpg"
image/04.jpg"
image/05.jpg"
image/06.jpg"
image/07.jpg"
image/08.jpg"
image/09.jpg"
image/11.jpg"
image/12.jpg"
image/13.jpg"
image/14.jpg"
image/15.jpg"
image/16.jpg"
image/17.jpg"
];
//滑动监听
window.onscroll=function(){
if(checkLoad(cparent)){
for(vari=0;
i<
data.length;
i++){
//创建新的节点
vardiv1=document.createElement("
div"
div1.className="
vardiv2=document.createElement("
div2.className="
varimg=document.createElement("
img"
img.className="
.box_borderimg"
img.src=data[i];
div2.appendChild(img);
div1.appendChild(div2);
cparent.appendChild(div1);
//创建节点后重新排列
检查是否应该加载
functioncheckLoad(cparent){
//得到图片个数
varlastImgHight=childArray[childArray.length-1].offsetTop;
//得到最后一张图片距离顶部高度
varscrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
//获得滑动距离(浏览器兼容性真烦人)
varbrowserHeight=document.documentElement.clientHeight;
//获得浏览器高度
if(lastImgHight<
scrollHeight+browserHeight){//判断是否加载
returntrue;
}else{
returnfalse;
functionsetImgLocation(cparent){
varbrowserWidth=document.documentElement.clientWidth;
varcount=Math.floor(browserWidth/imgWidth);
以上就是本文章的内容,希望对大家有所帮助
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript 实现 循环 渐近 瀑布 效果