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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
详解vue-router基本使用
Apr 18 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 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的优点与缺点
2013/04/11 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
python3使用flask编写注册post接口的方法
2018/12/28 Python
python中time库的实例使用方法
2019/10/31 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
局域网定义和特性
2016/01/23 面试题
一些关于MySql加速和优化的面试题
2014/01/30 面试题
大专自我鉴定范文
2013/10/01 职场文书
学生个人的自我评价分享
2013/11/05 职场文书
皮肤科医师岗位职责
2013/12/04 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
公司停电通知
2015/04/15 职场文书
2015年中秋寄语
2015/07/31 职场文书
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js