JS原生效果瀑布流布局的实现(一)

JS原生效果实现：

HTML页面布局：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

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

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

     </head>

     <body>

         <div id="main">

             <div class="box">

                 <div class="pic">

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

                 </div>

             </div>

             <div class="box">

                 <div class="pic">

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

                 </div>

             </div>

             <div class="box">

                 <div class="pic">

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

                 </div>

             </div>

             <div class="box">

                 <div class="pic">

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

                 </div>

             </div>

             <div class="box">

                 <div class="pic">

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

                 </div>

             </div>

             <div class="box">

                 <div class="pic">

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

                 </div>

             </div>

             <div class="box">

                 <div class="pic">

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

                 </div>

             </div>

             <div class="box">

                 <div class="pic">

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

                 </div>

             </div>

             <div class="box">

                 <div class="pic">

                     <img src="img/9.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>

     </body>

 </html>

CSS样式效果：

 * {margin:;padding:;}

 img{display: block;}

 #main{position: relative;}

 .box{padding: 15px 0 0 15px;float: left;}

 .pic{padding: 10px;border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; display: block;}

 .pic img{width: 165px;height: auto;}

JS实现：

1、将main下所有的class为box的元素取出来，封装一个获取class的一个函数 getByClass();

//根据class获取元素

function getByClass(parent,clsName){

	var boxArr=[];//用来存储获取到的所有的class为box的元素

	oElements=parent.getElementsByTagName("*");

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

		if(oElements[i].className==clsName){

			boxArr.push(oElements[i]);

		};

	};

	return boxArr;

};

2、计算页面当中，显示多少列（页面宽/box的宽）

var oBoxW=oBoxs[0].offsetWidth;

var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
//设置main的宽
oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto;';

3、对页面图片进行定位

注：第一排图片是不需要进行定位的，但是第二行的第一张图片要出现在上一行当中盒子最矮的下面，紧接着第八张依次排列上一行当中盒子最矮的下面！

4、定义一个数组，存放页面上每列高度的数组！

var hArr=[];//存放每一列高度的数组

最开始，数组中存放的是第一行中每列的高度值，之后就是存放着每一列的所有高度值的总和！

     for(var i=0;i<oBoxs.length;i++){//遍历所有 class为box的 盒子

         if(i<cols){//如果i小于列数

             hArr.push(oBoxs[i].offsetHeight);//那么 就把这些盒子的高度存放在hArr数组里

         }else{

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

             var index=getMinhIndex(hArr,minH);

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

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

             oBoxs[i].style.left=oBoxW*index+'px';

             hArr[index]+=oBoxs[i].offsetHeight;//修改列的高度

         };

     };

5、判断数组中最小的值：

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

求出最小值在数组中的索引值 :

遍历数组中每一个值，拿每一个值跟val比较，如果相等，则该索引值就是我们需要的

function getMinhIndex(arr,val){

	for(var i in arr){

		if(arr[i]==val){

			return i;

		}

	}

};

6、拖动滚动条，不断加载剩下的图片！并不是拖动了滚动条，我们就需要加载数据，我们需要检测一下，是否具备加载数据块的条件！（检测最后一张图片）

当我们拖动滚动条的时候，最后一张图片还未进入可视区域内，是不需要加载图片的！

当最后一张图片进入到可视区域高度的一半的时候，开始加载图片！

判断当最后一张图片高度的一半距离页面顶部的距离 < 滚动条滚动的距离+页面可是的区域 成立的时候，开始加载图片！

//检测是否具备了滚动条加载数据的条件

function checkScrollSlide(){

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

	var oBoxs=getByClass(oParent,'box');

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

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

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

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

};

	window.onscroll=function(){

		if(checkScrollSlide){

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

			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("main","box");

		};

JS原生效果瀑布流布局的实现(一)的更多相关文章

原生js实现图片瀑布流布局，注释超详细
完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
原生js实现的瀑布流布局
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
js实现网页瀑布流布局
效果图: html代码实现网页布局: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现什么是瀑布流效果首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
JS案例之6——瀑布流布局(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
JS瀑布流布局模式(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
原生 JS 实现一个瀑布流插件
更好的阅读体验,点击原文地址瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...

随机推荐

Java8之——简洁优雅的Lambda表达式
Java8发布之后,Lambda表达式,Stream等等之类的字眼边慢慢出现在我们字眼.就像是Java7出现了之后,大家看到了“钻石语法”,看到了try-with-resource等等.面对这些新东西 ...
在RichFaces中使用Facelets模板
在RichFaces中使用Facelets模板目录 Facelets简介 Facelets标签创建相应文件 Facelets简介 Facelets是用来构建JSF应用程序的默认视图技术.它为表现层 ...
[WebServer] Tomcat 配置访问限制：访问白名单和访问黑名单
前言: 昨天配置了 Tomcat 服务器运行 PHP 的环境,但是通过观察 Tomcat 这几天的日志发现,有很多莫名其妙的 IP 访问主机下莫名其妙的地址,如:/80./testproxy.php. ...
深入理解JQuery插件开发
如果你看到这篇文章,我确信你毫无疑问会认为jQuery是一个使用简便的库.jQuery可能使用起来很简单,但是它仍然有一些奇怪的地方,对它基本功能和概念不熟悉的人可能会难以掌握.但是不用担心,我下面已 ...
Coding源码学习第四部分(Masonry介绍与使用(一))
Masonry GitHub:https://github.com/SnapKit/Masonry Masonry是一个轻量级的布局框架,拥有自己的描述语法,采用更优雅的链式语法封装自动布局,简洁明了 ...
导航效果css
<!doctype html> <html> <head> <meta charset="utf-8" /> <style&g ...
OC基础--结构体枚举做类成员属性
结构体枚举作类的成员属性: 定义一个学生类性别 -- 枚举生日入学日期毕业日期 -- 结构体代码示例: 声明文件 Student.h: #import <Foundation ...
php ob_start()、ob_end_flush和ob_end_clean()多级缓冲
ob_start() 和 ob_end_flush() 是一对很好的搭档,可以实现对输出的控制.当成一对出现理解起来就没什么问题,但是当他们两个各自出现次数增加时,就比较难理解了. <?php ...
谈谈eclipse使用技巧
俗话说的好啊,“工于利启事,必先善其器”,如果说你的编程功底是一个枪法的话,那么强大的eclipse就是android战士们最好的武器. 这里,我们来总结eclipse的使用技巧,从而使我们的编程达到 ...
java多线程之基本概念
一.线程的五种状态 1. 新建状态(New) : 线程对象被创建后,就进入了新建状态.例如,Thread thread = new Thread().2. 就绪状态(Runnable) ...

JS原生效果瀑布流布局的实现(一)

JS原生效果瀑布流布局的实现(一)的更多相关文章

随机推荐

热门专题