JS瀑布流效果
本篇内容实现类似百度图片的呈现功能，瀑布流+自动加载
index13.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>uvi</title>
<link rel="stylesheet" href="style2.css" type="text/css">
<script src="myjs.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box_img">
<img src="img.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img2.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img7.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img8.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img9.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img7.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img8.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img9.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img7.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img8.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img9.jpg">
</div>
</div> </div>
</div> </body>
</html>
css代码:
*{
margin:0px;
padding:0px;
}
#container{
position:relative;
}
.box{
padding: 5px;
float: left;
}
.box_img{
padding:5px;
border:1px solid #cccccc;
box-shadow: 5px #cccccc;
border-radius:5px;
}
.box_img img{
width:1000px;
height:auto;
}
js代码
window.onload = function(){
imgLocation("container","box");
var imgData={"data":[{"src":"img.jpg"},{"src":"img2.jpg"},{"src":"img3.jpg"}]};
window.onscroll = function(){//监听滚动条
if(checkFlag()){
var cparent = document.getElementById("container");
for(var i=;i<imgData.data.length;i++){
var ccontent = document.createElement("div");
ccontent.className = "box";
cparent.appendChild(ccontent);
var boximg = document.createElement("div");
boximg.className = "box_img";
ccontent.appendChild(boximg);
var img = document.createElement("img");
img.src = imgData.data[i].src;
boximg.appendChild(img);
}
imgLocation("container","box");
}
}
}
function checkFlag(){
var cparent = document.getElementById("container");
var ccontent = getChildElement(cparent, "box");
var lastContentHeight = ccontent[ccontent.length-].offsetTop;//获取最后一张照片距离顶部的高度
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;
if(lastContentHeight<scrollTop+pageHeight){
return true;
}
}
function imgLocation(parent,content){
//将parent下的所有content全部取出
var cparent = document.getElementById(parent);
var ccontent = getChildElement(cparent,content);
var imgWidth = ccontent[].offsetWidth;
var num =Math.floor(document.documentElement.clientWidth/imgWidth);
cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0px auto";
var BoxHeightArr = [];
for(var i = ;i<ccontent.length;i++){
if(i<num){
BoxHeightArr[i] = ccontent[i].offsetHeight;
}else{
var minHeight = Math.min.apply(null,BoxHeightArr);//获得最小高度
var minIndex = getminheightLocation(BoxHeightArr,minHeight);
ccontent[i].style.position = "absolute";
ccontent[i].style.top = minHeight+"px";
ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";
BoxHeightArr[minIndex] = BoxHeightArr[minIndex]+ccontent[i].offsetHeight;
}
}
}
function getminheightLocation(BoxHeightArr,minHeight){
for(var i in BoxHeightArr){
if(BoxHeightArr[i]==minHeight){
return i;
}
}
}
function getChildElement(parent,content){
var contentArr = [];
var allcontent = parent.getElementsByTagName("*");
for(var i =;i<allcontent.length;i++){
if(allcontent[i].className==content){
contentArr.push(allcontent[i]);
}
}
return contentArr;
}
JS瀑布流效果的更多相关文章
- JS 瀑布流效果
JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- 面向对象js瀑布流效果
index.html <!doctype html><html lang="en"> <head> <!--网站编码格式,UTF-8 国 ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- 利用JS实现简单的瀑布流效果
哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...
- js图片瀑布流效果
要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...
- js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
- 使用JS实现图片展示瀑布流效果
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...
- WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...
- 用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...
随机推荐
- 两台Linux机之间传送文件
最近实验室里接管了一台服务器,经常需要用到服务器与自己主机之间进行文件传输,因此,在此介绍一下两台Linux主机之间的一些操作,方便后来者. 1. Linux.Windows主机远程访问Linux服务 ...
- mongodb的地理空间索引如何在solr中体现
"$near"是唯一一个会对查询结果进行自动排序的地理空间操作符 "$near"的返回结果是按照距离由近及远排序的.其他排序条件不会生效. 这种按照地理位置远近 ...
- gradle命令
gradle tasks 可以显示gradle可以做的任务. gradle build 就会生成jar包. build和clean install的作用是否一致?
- uploadify在asp.net中的试用小结
花了差不多一下午的时间,总算把uploadify插件运行起来,在此对自己遇到的问题以及过程做一个小结. 一.使用步骤 1.在官网下载最新的插件包,并将包解压. 2.新建asp.net web项目,将解 ...
- C# - openxml 操作excel - '“System.IO.Packaging.Package”在未被引用的程序集中定义'
在 CodeProject中,有位网友写的一篇基于OpenXML SDK 2.0对excel(大数据量)进行操作,其中,运行的时候,有如下错误: 类型“System.IO.Packaging.Pack ...
- 表被占用住，提示资源正忙的处理方式。kill掉表的操作。
1)查找死锁的进程: SELECT s.username,l.OBJECT_ID,l.SESSION_ID,s.SERIAL#,l.ORACLE_USERNAME,l.OS_USER_NAME,l ...
- vsftp关于"550 create directory operation failed"问题解决
前提: 昨天晚上配置好了vsftp, 但登陆后,除了浏览,什么也干不了.(如新建文件/文件夹, 删除文件, 重命名等都不可操作) 都是弹出 "550 create directory ope ...
- Calling a C++ dll with unsigned char* parameters
unsigned char* 等价 BYTE* 例1: C++: int __stdcall LIVESCAN_GetFPRawData(int nChannel, unsigned char *p ...
- setTimeout(fn, 0)引发的JavaScipt线程的思考
起因 周五改一个checkbox的display属性被错误地设置为none的bug. 经debug发现, 有两个地方修改了display属性: 1) checkbox的controller; 2) c ...
- win8\win server 2012添加【中文--美式键盘】
1. 修改注册表 Windows Registry Editor Version 5.00 [HKEY_CURRENT_USERKeyboard Layout] [HKEY_CURRENT_USERK ...