web前端学习（四）JavaScript学习笔记部分（8）-- JavaScript瀑布流

index.html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script src="js/waterfall.js"></script>

<style type="text/css">

    *{padding: 0;margin:0;}

    #main{

        position: relative;

    }

    .pin{

        /*padding: 15px 0 0 15px;*/

        padding:15px 7.5px 0 7.5px;/*上面的不是严格的居中，强迫症不能忍*/

        /*这里设置padding的原因是如果设置margin会没法控制居中状态，而且除了第一行的图片，后面的图片都是绝对布局*/

        /*margin:15px 7.5px 0 7.5px;*/

        float:left;

    }

    .box{

        padding: 10px;

        border:1px solid #ccc;

        box-shadow: 0 0 6px #ccc;

        border-radius: 5px;

    }

    .box img{

        width:162px;

        height:auto;

    }

</style>

</head>

<body>

<div id="main">

    <div class="pin">

        <div class="box">

            <img src="./images/1.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/2.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/3.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/4.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/5.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/6.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/7.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/8.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/9.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

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

        </div>

    </div>

    <div class="pin">

        <div class="box">

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

        </div>

    </div>

    <div class="pin">

        <div class="box">

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

        </div>

    </div>

    <div class="pin">

        <div class="box">

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

        </div>

    </div>

    <div class="pin">

        <div class="box">

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

        </div>

    </div>

    <div class="pin">

        <div class="box">

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

        </div>

    </div>

    <div class="pin">

        <div class="box">

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

        </div>

    </div>

    <div class="pin">

        <div class="box">

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

        </div>

    </div>

    <div class="pin">

        <div class="box">

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

        </div>

    </div>

    <div class="pin">

        <div class="box">

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

        </div>

    </div>

    <div class="pin">

        <div class="box">

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

        </div>

    </div>

    <div class="pin">

        <div class="box">

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

        </div>

    </div>

</div>

</body>

</html>

waterfall.js

/*

这里的方法有一个缺点就是这样做的是二次加载，先加载完了图片然后获取位置，再重新进行排列而得到的最终结果，所以网页会闪一下。。。

*/

window.onload=function(){

    waterfall('main','pin');

    var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'}]};

    window.onscroll=function(){

        if(checkscrollside()){

            var oParent = document.getElementById('main');// 父级对象

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

                var oPin=document.createElement('div'); //添加 元素节点

                oPin.className='pin';                   //添加 类名 name属性

                oParent.appendChild(oPin);              //添加 子节点

                var oBox=document.createElement('div');

                oBox.className='box';

                oPin.appendChild(oBox);

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

                oImg.src='./images/'+dataInt.data[i].src;

                oBox.appendChild(oImg);

                /*上述内容可以封装为添加新节点的方法，供之后使用。*/

            }

            waterfall('main','pin');

        };

    }

}

/*这里实现的是无限加载图片，因为它一直检测的是滚动条的位置，而且只要滚动条到了规定的位置就会加载dataInt的数据内容。*/

/*

    parend 父级id

    pin 元素id

*/

function waterfall(parent,pin){

    var oParent=document.getElementById(parent);// 父级对象

    var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin

    // alert("中断查看点1");

    // console.log(aPin.length);/*这里就可以看出数组的长度是一直在增长的，不过因为数组内的内容都是图片路径，*/

                                /*所以加载起来比较容易是这样吗，我也不知道...*/

    var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽

    var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】

    oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//设置父级居中样式：定宽+自动水平外边距

    var pinHArr=[];//用于存储 每列中的所有块框相加的高度。a

    for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素

        var pinH=aPin[i].offsetHeight;

        if(i<num){

            pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr

        }else{

            // alert("中断查看点2");这个断点有问题，弹出太多了。。。

            var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH

            var minHIndex=getminHIndex(pinHArr,minH);

            aPin[i].style.position='absolute';//设置绝对位移

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

            aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';

            //数组 最小高元素的高 + 添加上的aPin[i]块框高

            pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高

        }

    }

}

   /*

    *通过父级和子元素的class类 获取该同类子元素的数组

    */

function getClassObj(parent,className){

    var obj=parent.getElementsByTagName('*');//获取 父级的所有子集

    var pinS=[];//创建一个数组 用于收集子元素

    for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组

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

            pinS.push(obj[i]);/*push将其加入数组之中*/

        }

    };

    return pinS;

}

/****

    *获取 pin高度 最小值的索引index

    */

function getminHIndex(arr,minH){

    for(var i in arr){

        if(arr[i]==minH){

            return i;

        }

    }

}

function checkscrollside(){

    var oParent=document.getElementById('main');

    var aPin=getClassObj(oParent,'pin');

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

    //上面一句函数：创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)

    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性

    var documentH=document.documentElement.clientHeight;//页面高度

    return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数

}

在编写的时候还需要按实际情况编写代码，此代码仅供示例。

web前端学习（四）JavaScript学习笔记部分（8）-- JavaScript瀑布流的更多相关文章

web前端－－知识点，笔记叠加（javascript,jquery,html5+css3.0,ajax）
函数传参列表,获取方法arguments的使用 function arg(){ var str = '总共传了'+arguments.length+'个参数\n'; for(var i=0;i< ...
Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频链接: http://pan.ba ...
想做web前端project师应该学习些什么？
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
web前端开发控件学习笔记之jqgrid+ztree+echarts
版权声明:本文为博主原创文章,转载请注明出处. 作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...
2022年Web前端开发流程和学习路线（详尽版）
前言前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...
最适合2018年自学的web前端零基础系统学习视频＋资料
这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...
web前端零基础入门学习！前端真不难！
现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...
史上最全的web前端开发程序员学习清单！
今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我回答过无数次这种问题了,但是问这个的还是有 ...
WEB 前端模块化，读文笔记
文章链接 WEB 前端模块化都有什么? 知识点根据平台划分浏览器 AMD.CMD 存在网络瓶颈,使用异步加载非浏览器 CommonJS 直接操作 IO,同步加载浏览器 AMD 依赖前置 req ...

随机推荐

Nand flash 芯片工作原理
Nand flash 芯片型号为 Samsung K9F1208U0B,数据存储容量为 64MB,采用块页式存储管理.8 个 I/O 引脚充当数据.地址.命令的复用端口. 芯片内部存储布局及存储操作特 ...
单体内置对象——Global对象
单体内置对象的定义:由ECMAScript实现提供的.不依赖于宿主环境的对象,这些对象在ECMAScript程序执行之前已经存在了.意思就是说:开发人员不必显式地实例化内置对象,因为他们已经实例化了. ...
04.Mybatis输出映射之ResultMap
当实体类中的字段名与数据库中的字段名不一致时需要手动设置映射关系在Mapper.xml中定义 <!-- resultMap最终还是要将结果映射到pojo上,type就是指定映射到哪一个pojo ...
【SDOI2015】约数个数和
题面求\(\sum_{i=1}^n\sum_{j=1}^md(ij)\) \(\leq 50000\)组数据,\(1\leq n,m\leq 50000\). 题目分析首先,你需要知道一个结论: ...
Apache Flink 进阶（一）：Runtime 核心机制剖析
1. 综述本文主要介绍 Flink Runtime 的作业执行的核心机制.首先介绍 Flink Runtime 的整体架构以及 Job 的基本执行流程,然后介绍在这个过程,Flink 是怎么进行资源 ...
python相关软件安装流程图解————————python安装——————python-3.7.1-amd64
首先查看自己的系统版本是32位的还是64位的 https://www.python.org/downloads/windows/ —————————python下载安装开始———————————— ...
Spring boot配置Dubbo三种方式
方式一使用注解的方式导入dubbo-starter 在application.properties配置属性使用@Service暴露服务使用@Reference引用服务使用@EnableDub ...
Thinkphp5 RCE总结
thinkphp5最出名的就是rce,我先总结rce,rce有两个大版本的分别 ThinkPHP 5.0-5.0.24 ThinkPHP 5.1.0-5.1.30 因为漏洞触发点和版本的不同,导致pa ...
iOS之CAShapeLayer属性简介
1.CAShapeLayer需要和贝塞尔曲线一块使用! #import <QuartzCore/CALayer.h> NS_ASSUME_NONNULL_BEGIN CA_CLASS_AV ...
JEECMS 自定义标签
CMS 是”Content Management System” 的缩写,意为” 内容管理系统”. 内容管理系统是企业信息化建设和电子政务的新宠,也是一个相对较新的市场.对于内容管理,业界还没有一个统 ...

web前端学习（四）JavaScript学习笔记部分（8）-- JavaScript瀑布流

web前端学习（四）JavaScript学习笔记部分（8）-- JavaScript瀑布流的更多相关文章

随机推荐

热门专题