javascript实现瀑布流自适应遇到的问题及解决方案


Posted in Javascript onJanuary 28, 2015

这几天看了Amy老师的用javascript实现瀑布流,我跟着把代码敲出来。发现这样写只能第一次载入时适应屏幕,以后改变窗口大小就不能做到自适应了。

于是我想到了用window.onresize来使得瀑布流函数从新加载来达到目的,

window.onload=function(){

    //瀑布流函数

    waterfall('content','box');

    //模拟数据加载

    var dataInt = {"data":[{"src":"01.jpg"},{"src":"02.jpg"},{"src":"03.jpg"},{"src":"04.jpg"},{"src":"05.jpg"},{"src":"06.jpg"},{"src":"07.jpg"}]}

    //当屏幕大小改变时从新执行瀑布流函数 达到从新适应的作用

    window.onresize=function(){

//      waterfall('content','box');

       setTimeout(function() {waterfall('content','box');}, 200);

    }

    window.onscroll=function(){

        if(checkScroll()){

            var oparent = document.getElementById('content');

            //将熏染的数据添加入html中

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

                var obox = document.createElement("div");

                obox.className = "box";

                oparent.appendChild(obox);

                var opic = document.createElement("div");

                opic.className = "pic";

                obox.appendChild(opic);

                var oImg = document.createElement("img");

                oImg.src="img/"+dataInt.data[i].src;

                opic.appendChild(oImg);

            }

                waterfall('content','box');

        }

    }

}

当屏幕缩小时是可以的,但是从缩小的放大就出现了BUG

javascript实现瀑布流自适应遇到的问题及解决方案

看没看到后面几列的顶部回不来了,
于是我打开开发工具看是怎么回事,

javascript实现瀑布流自适应遇到的问题及解决方案

第3 4 5个div中不应该有style,是因为缩小的时候给他添加上去的,而放大了他没有清除所以保留下来了就会出现这个样子于是:我在瀑布流函数里加了句aBox[i].style.cssText ='';使得每次进来都清空style

function waterfall(parent,box){

    //将content下所有class box取出来

    var aParent = document.getElementById(parent);

    var aBox = getBclass(aParent,box);

    //获取盒子的宽度

    var aBoxW = aBox[0].offsetWidth;

    //用浏览器的可是宽度除以box宽度 得到列数

    var cols = Math.floor(document.documentElement.clientWidth/aBoxW);

    //设定 content的宽度 和居中

    aParent.style.cssText = 'width:'+aBoxW*cols+'px;height:auto;position: relative; margin:0 auto;padding-right:15px';

    //创建每一列的高度数组

    var hArr=[];

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

        aBox[i].style.cssText ='';

        if(i<cols){

            hArr.push(aBox[i].offsetHeight); 

        }else{

            var minH = Math.min.apply(null,hArr);

            var index = getMinIndex(hArr,minH);  //找出高最矮的 索引值

            //console.log(aBoxW);

            aBox[i].style.position = 'absolute';

            aBox[i].style.top = minH+'px';

            aBox[i].style.left = aBoxW*index+'px';

            hArr[index]+=aBox[i].offsetHeight;

        }

    }

}

这样就解决了缩小后回不来的BUG,可以正常自适应了

javascript实现瀑布流自适应遇到的问题及解决方案

最后我把整个的javascript 贴出来

window.onload=function(){

    //瀑布流函数

    waterfall('content','box');

    //模拟数据加载

    var dataInt = {"data":[{"src":"01.jpg"},{"src":"02.jpg"},{"src":"03.jpg"},{"src":"04.jpg"},{"src":"05.jpg"},{"src":"06.jpg"},{"src":"07.jpg"}]}

    //当屏幕大小改变时从新执行瀑布流函数 达到从新适应的作用

    window.onresize=function(){

//      waterfall('content','box');

       setTimeout(function() {waterfall('content','box');}, 200);

    }

    window.onscroll=function(){

        if(checkScroll()){

            var oparent = document.getElementById('content');

            //将熏染的数据添加入html中

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

                var obox = document.createElement("div");

                obox.className = "box";

                oparent.appendChild(obox);

                var opic = document.createElement("div");

                opic.className = "pic";

                obox.appendChild(opic);

                var oImg = document.createElement("img");

                oImg.src="img/"+dataInt.data[i].src;

                opic.appendChild(oImg);

            }

                waterfall('content','box');

        }

    }

 

}

function waterfall(parent,box){

    //将content下所有class box取出来

    var aParent = document.getElementById(parent);

    var aBox = getBclass(aParent,box);

     

    //获取盒子的宽度

    var aBoxW = aBox[0].offsetWidth;

    //用浏览器的可是宽度除以box宽度 得到列数

    var cols = Math.floor(document.documentElement.clientWidth/aBoxW);

    //设定 content的宽度 和居中

    aParent.style.cssText = 'width:'+aBoxW*cols+'px;height:auto;position: relative; margin:0 auto;padding-right:15px';

    //创建每一列的高度数组

    var hArr=[];

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

        aBox[i].style.cssText ='';

        if(i<cols){

            hArr.push(aBox[i].offsetHeight); 

        }else{

            var minH = Math.min.apply(null,hArr);

            var index = getMinIndex(hArr,minH);  //找出高最矮的 索引值

            //console.log(aBoxW);

            aBox[i].style.position = 'absolute';

            aBox[i].style.top = minH+'px';

            aBox[i].style.left = aBoxW*index+'px';

            hArr[index]+=aBox[i].offsetHeight;

        }

    }

}

//根据class获取到元素

function getBclass(parent,className){

    var boxarr = new Array(); //用来存储获取到的class

        //console.log(parent.prototype);

    allElement=parent.getElementsByTagName('*');

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

        if(allElement[i].className == className){

            boxarr.push(allElement[i]);

        }

    }

    return boxarr;

}

 

//找出高最矮的 索引值

function getMinIndex(arr,value){

    for(var i in arr){

        if (arr[i]==value){

            return i;

        }

    }

}

//建立一个检测轮轮滑动是否成立的函数  返回真假

function checkScroll(){

    var oparent = document.getElementById("content");

    var oBox = getBclass(oparent,'box');

    var lastoBoxTop = oBox[oBox.length-1].offsetTop+Math.floor(oBox[oBox.length-1].offsetHeight/2);

    //console.log(lastoBoxTop);

    var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;

    var height = document.body.clientHeight||document.documentElement.clientHeight;

    //console.log(scrollTop);

    return(lastoBoxTop<scrollTop+height)?true:false;

}

css文件贴出来

*{margin: 0;padding: 0;}

body{background-color: #eee;}

.content{ 

    position: relative;

    }

.box{

    padding: 15px 0 0 15px;

    float: left;

}

.pic{

    padding: 10px;

    border: 1px solid #ccc;

    box-shadow: 0 0 5px #CCCCCC;

    border-radius: 5px;

    background: #fff;

}

.pic img{

    width: 220px;

    height: auto;

    border: 1px solid #eee;

}

html文件贴出来

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>javascript瀑布流</title>

        <link rel="stylesheet" type="text/css" href="css/pubuli.css"/>

        <script type="text/javascript" src="js/my.js" ></script>

    </head>

    <body>

        <div id="content">

            <div class="box">

                <div class="pic">

                <img src="img/01.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/02.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/03.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/04.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/05.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/06.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/07.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/08.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/09.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/10.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/11.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/12.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/13.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/14.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/15.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/16.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/17.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/18.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/19.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/20.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/21.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/22.jpg"/> 

                </div>

            </div>

        </div>

         

    </body>

</html>

好了谢谢大家观看,以前没写过技术分享类文章,有很多不周到的地方希望大家能多多指正。学习前端的小菜鸟敬上Y(^_^)Y

Javascript 相关文章推荐
基于jQuery的实现简单的分页控件
Oct 10 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 #Javascript
简单谈谈javascript代码复用模式
Jan 28 #Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 #Javascript
扒一扒JavaScript 预解释
Jan 28 #Javascript
javascript弹出页面回传值的方法
Jan 28 #Javascript
JS获得选取checkbox整行数据的方法
Jan 28 #Javascript
js获取checkbox值的方法
Jan 28 #Javascript
You might like
PHP 高级课程笔记 面向对象
2009/06/21 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
Javascript实现的分页函数
2006/12/22 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
Vue常用的几个指令附完整案例
2018/11/06 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Python探索之SocketServer详解
2017/10/28 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
使用Python的turtle模块画国旗
2019/09/24 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
技术人员面试提纲
2013/11/28 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
导游词之清晏园
2019/11/22 职场文书
Java的Object类的九种方法
2022/04/13 Java/Android