记录JS实现瀑布流照片墙效果

首先是前端页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" type="text/css" href="js瀑布流.css">
<script type="text/javascript" src="js瀑布流.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box_img">
<img src="img/1.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/2.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/3.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/4.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/5.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/6.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/7.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/8.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/9.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/10.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/11.jpg"/>
</div>
</div> </div>
</body>
</html>

接下来是样式

*{
margin:0px;
padding: 0px;
}
#container{
position: relative;
}
.box{
padding: 5px;
float: left;
}
.box_img{
padding: 5px;
border: 1px solid #cccccc;
box-shadow: 0 0 5px #cccccc;
border-radius: 5px;
}
.box_img img{
width: 150px;
height: auto;
}

最后是最主要的JS代码

加载图片

function imgLocation(parent,content){
var cparent=document.getElementById(parent);
var cconten=getChildElement(cparent,content);//得到所有子节点
var imgWidth=cconten[0].offsetWidth// 得到宽度,每张图片的宽度都是固定的,所以这里可以随便取一张
var cols=Math.floor(document.documentElement.clientWidth/imgWidth)//频幕的宽度除以图片的宽度,就是这一排能放图片的个数
cparent.style.cssText="width:"+imgWidth*cols+"px; margin:0 auto"; //设置主容器的样式 var boxHeightArr=[];//第一排图片的高度
for(var i=0;i<cconten.length;i++){
if (i<cols) { //如果是第一排 ,cols为一排能放图片的个数
boxHeightArr[i]=cconten[i].offsetHeight;
}
else{ //找到第一排最小图片的高度
var minHeight=Math.min.apply(null,boxHeightArr)//最小图片的高度
var minIndex= getminHeightLocation(boxHeightArr,minHeight);
cconten[i].style.position="absolute";
cconten[i].style.top=minHeight+"px";
cconten[i].style.left=cconten[minIndex].offsetLeft+"px";
boxHeightArr[minIndex]=boxHeightArr[minIndex]+cconten[i].offsetHeight;//把当前最小的高度加上当前追加图片的高度
}
} }

获得子节点

function getChildElement(parent,content){
var contentArr=[];
var allContent=parent.getElementsByTagName("*");
for (var i = 0; i <allContent.length; i++){
if(allContent[i].className==content){
contentArr.push(allContent[i])
}
}
return contentArr;
}

得到最小高度图片的位置

function getminHeightLocation(boxHeightArr,minHeight) {
for(var i in boxHeightArr){
if(boxHeightArr[i]==minHeight){
return i;
}
}
}

判断是否需要加载

function checkFlag(){
var cparent=document.getElementById("container");
var cconten=getChildElement(cparent,"box");
var lastContentHeight=cconten[cconten.length-1].offsetTop; //最后一张图片距顶部的高度
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//当前滚动距顶部的高度
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;//当前页面的高度
if(lastContentHeight<scrollTop+pageHeight){
return true;
} }

页面加载完触发

window.onload=function(){
imgLocation("container","box")
var imgData={'data':[{'src':'92.jpg'},{'src':'16.jpg'},{'src':'17.jpg'},{'src':'18.jpg'}]};
//鼠标滚动事件
window.onscroll=function(){
if(checkFlag()){ //是否需要加载图片
var cparent=document.getElementById("container");
for(var i=0;i<imgData.data.length;i++){
var cconten=document.createElement("div");
cconten.className="box";
cparent.appendChild(cconten);
var boximg=document.createElement("div");
boximg.className="box_img";
cconten.appendChild(boximg);
var img=document.createElement("img");
img.src="img/"+imgData.data[i].src;
boximg.appendChild(img);
}
imgLocation("container","box")
}
}
}

[JS练习] 瀑布流照片墙的更多相关文章

  1. 用js实现瀑布流的一种简单方法

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  2. Android瀑布流照片墙实现,体验不规则排列的美感

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/10470797 传统界面的布局方式总是行列分明.坐落有序的,这种布局已是司空见惯,在 ...

  3. 原生JS实现瀑布流

    浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...

  4. js实现瀑布流的一种简单方法实例分享

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  5. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  6. bootstrap+masonry.js写瀑布流

    最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...

  7. 多栏布局与JS实现瀑布流

    css3属性之多栏布局与JS实现瀑布流 背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决 ...

  8. js插件---瀑布流Masonry

    js插件---瀑布流Masonry 一.总结 一句话总结:还是要去看官网,比amazeui上面介绍的详细很多 1.瀑布流的原理是什么? 给外层套好相对定位,里面的每一个弄好绝对定位,然后计算出每一个的 ...

  9. js原生瀑布流

    背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...

随机推荐

  1. 关于C++异常机制的笔记(SEH, try-catch)

    昨天晚上加班解决了一个问题,是由于无法正确的捕获到异常导致的.刚开始用try-catch,但是没法捕获到异常:后面改成SEH异常才解决.因此今天将这个问题重新梳理了一遍,关于try-catch, SE ...

  2. 13 - NSURLConnection

    一.互联网 基本概念: HTTP协议 统一标准获取网络资源(其他设备上的东西) 本机 -> 远程服务器(计算机) URL(http有格式的字符串) 本机 <- 远程服务器(计算机) Fil ...

  3. 02-OC方法、属性

    目录: 一.方法 二.实例变量 三.属性(点语法) 四.初始化方法(自定义构造方法) 回到顶部 一.方法 1 函数与方法有什么区别? 函数只是一个程序的代码段,与类无关. 方法,类的一部分,代表对象可 ...

  4. 清华集训2014 day1 task1 玛里苟斯

    题目 这可算是描述很简单的一道题了!但是不简单. \(S\)是一个可重集合,\(S = \{a_1, a_2, \dots, a_n \}\). 等概率随机取\(S\)的一个子集\(A = \{a_{ ...

  5. 基于mAppWidget实现手绘地图--索引&DEMO

    文章翻译完了,梳理一下,附Demo下载 基于mAppWidget实现手绘地图(一)–简介 基于mAppWidget实现手绘地图(二)–概要 基于mAppWidget实现手绘地图(三)–环境搭建 基于m ...

  6. Machine Learning #Lab1# Linear Regression

    Machine Learning Lab1 打算把Andrew Ng教授的#Machine Learning#相关的6个实验一一实现了贴出来- 预计时间长度战线会拉的比較长(毕竟JOS的7级浮屠还没搞 ...

  7. mysql导入sql文件过大或连接超时的解决的方法

    前段时间出差在现场开发的时候,导入数据库老是出问题.最后发现了一个奇妙sql语句交给实施,仅仅要导入出错就把例如以下语句运行就能够了.至今屡试不爽. set global max_allowed_pa ...

  8. 【HTTP】Fiddler(二) - 使用Fiddler做抓包分析

    上文( http://blog.csdn.net/ohmygirl/article/details/17846199 )中已经介绍了Fiddler的原理和软件界面.本文主要针对Fiddler的抓包处理 ...

  9. HTML学习笔记(七)

    1.       假设想让div中的内容(content)垂直居中,能够将line-height的值设置与div的高度相等来实现. 2.       超伪类链接的四种形式: watermark/2/t ...

  10. EasyUI - pagination 分页组件

    总页数是手动填写,后续进行更改……………… 效果: html代码: <!--使用标签创建--> <%--<div id="pp" class="e ...