原生js实现瀑布流布局
用js实现瀑布流布局以及通过模拟的数据加载图片，已标记注释
效果如图：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>瀑布流布局-JS实现</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#main{
position: relative;/*整体相对定位，因为每个小图片盒子的位置是通过计算再由绝对定位放置，是需要相对于main盒子*/
}
.box{
padding: 15px 0 0 15px;/*padding为内边距，后面js获取的高度包括padding的距离*/
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{
width: 165px;
height: auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oParent=document.getElementById("main");
var oBoxs=oParent.getElementsByClassName("box");
waterfall('main','box');//调用瀑布布局的函数
var dataInt={"data":[{"src":'23.jpg'},{"src":'24.jpg'},{"src":'25.jpg'}]}//模拟出要加载的图片
window.onscroll=function(){
if(checkscrollSlide()){//如果调用函数的返回结果为true
//将数据块渲染到当前页面底部
for(var i=0;i<dataInt.data.length;i++){//dataInt对象的data属性的长度
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');
};
}
function waterfall(parent,box){
var oParent=document.getElementById(parent);
var oBoxs=oParent.getElementsByClassName(box);
var oBoxW=oBoxs[0].offsetWidth;//计算每个box的宽度
//计算整个页面显示的列数（页面宽/box的宽）
var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
//设置main的宽,居中
oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto;';
var hArr=[];//存放每一列高度的数组
for(var i=0;i<oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight);//将第一行的各个高度加到数组中
}else{
var minH=Math.min.apply(null,hArr);//apply方法可以改变数组的指向,因为Math.min方法不支持数组
var index=getMinhIndex(hArr,minH);
oBoxs[i].style.position='absolute';
oBoxs[i].style.top=minH+'px';
oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
hArr[index]+=oBoxs[i].offsetHeight;
}
}
}
function getMinhIndex(arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
//检测是否具备了滚动条加载数据块的条件
function checkscrollSlide(){
//最后一个盒子的距顶部的高度加上自身高度的一半
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;
}
}
</script>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="img/0.jpg" />
</div>
</div>
<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 class="box">
<div class="pic">
<img src="img/22.jpg" />
</div>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于JavaScript实现瀑布流布局(二)
本文实例讲解了JavaScript实现瀑布流布局详细代码,分享给大家供大家参考,具体内容如下 1.建立Html模版 想法是先用一个div container承载所有内容,然后div box用来放置图片,最后div box_border来当图片框,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流</title> </head
-
原生JS实现响应式瀑布流布局
原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http://leozdgao.github.io/demo/responsive_waterfall/ 演示图: 核心代码: responsive_waterfall.js (function() { var Waterfall = function(opts) { var minBoxWidth; Object.defineProper
-
解析瀑布流布局:JS+绝对定位的实现
绝对定位方式的瀑布流布局: 一.布局 1.包围块框的容器: 复制代码 代码如下: <div id="main"> ... ...<div> 2.一个块框: 复制代码 代码如下: <div class="pin"> <div class="box"> <img src="./images/g (1).jpg"/> </div>
-
纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax模拟数据图片后,是将整个页面的所有图片都重新定位一次. 3. 程序是等所有图片加载完成后再读取图片的尺寸,实际中肯定不能这样做. 4. 实际项目中,应该由后台程序给出图片尺寸值,在js代码中直接使用图片的width属性. 本程序思路: html结构: <body> <div id="
-
javascript瀑布流布局实现方法详解
本文实例讲述了javascript瀑布流布局实现方法.分享给大家供大家参考,具体如下: html结构: <div id="waterfall"> <div class="mod-box"> <div class="mod-img">...</div> </div> <div class="mod-box"> <div class="mod-
-
基于JavaScript实现瀑布流布局
本文实例讲解了原生JavaScript实现瀑布流布局详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="
-
JavaScript瀑布流布局实现代码
先说一下什么是瀑布流布局. 就是一堆等宽不等高的数据块组成的页面,如图: 现在好多网站都采用这种瀑布流布局,如蘑菇街.美丽说等等. 首先要实现它就要明白它是怎样排列的. 每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的.. 第一行就是按顺序排列,其他的数据块都是在每一列中挑选出最低的那一列依次排进去的. 首先实现框架. <div id = "main"> <div class = "box"> <div class = &quo
-
原生JavaScript实现瀑布流布局
本文实例讲解了原生JavaScript实现瀑布流布局详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: window.onload=function(){ waterfall('main','pin'); var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}; window.onscroll=function(){ if(checkscrollside()){
-
原生JS实现美图瀑布流布局赏析
自pinterest网站爆红以来,国内一度掀起"仿PIN"狂潮,诸如花瓣.蘑菇街等等.正是如此,"瀑布流"式布局受到广大网民的青睐.众多知名JS库,也相继出现"瀑布流"布局插件,譬如jQuery的Masonry插件.KISSY的waterfall插件等.今天闲来无聊,我也自己动手弄了段原生JS代码,实现了简单的"瀑布流"布局效果,当然肯定不能和以上那些优秀插件相提并论,有兴趣的朋友,可以去看看,希望能带给你或多或少的收获. 1
-
深入学习js瀑布流布局
本文实例为大家分享了js瀑布流布局学习资料,供大家参考,具体内容如下 特点:等宽不等高. 实现方式:Javascript/Jquery/CSS3多栏布局. 样例网站:花瓣网-->分类 一.JS实现瀑布流 index.html:页面结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流布局</titl