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代码.神奇的让我来把 ...
随机推荐
- yii gridview columns value 内容如何换行 & 链接
array( 'header' => '返回的服务器信息', 'name' => 'return_server_info', 'value' => 'str_replace(&quo ...
- 小学生之Map集合框架的使用
Map用于保存具有映射关系的数据(key-vlaue).Map的key不允许重复,即同一个Map对象的任何两个key通过equals方法比较总是返回false Map中包含了一个keySet()方法, ...
- 增加Android模拟器的内存
1,在window中,打开'C:\Users\Administrator\.android\avd\4.4.2.avd\config.ini'文件(我的是win7,xp的貌似不是'Users',是'D ...
- C#操作MYSQL遇到0000-00-00日期报错的原因
今天在做一个C#连接MYSQL数据库,并读取数据库的内容,遇到了0000-00-00日期转换报错:unable to convert MySQL date/time value to System.D ...
- oracle单行函数之通用函数
NVL (a,b) --当a=null时,返回b,否则返回a NVL2 (a, b, c) -- 当a=null时,返回c,否则返回b NULLIF (expr1, expr2) --当a=b时,返回 ...
- querySelector选择器
querySelector选择器可以通过document和element来调用他们 用来代替getElementById var body=document.querySelector("b ...
- HAOI 硬币购物
试题描述: 现在一共有4种硬币,面值各不相同,分别为ci(i=1,2,3,4).某人去商店买东西,去了tot次,每次带di枚ci硬币,购买价值为si的货物.请问每次有多少种付款方法. 输入: 第一行包 ...
- Flume 1.4.0 User Guide
Apache Flume is a distributed, reliable, and available system for efficiently collecting, aggregatin ...
- Oracle Union All 排序
在oracle中使用union all或者 union 对两个结果集进行并集操作时,如果需要对查询结果集进行排序时,不能直接在后面加order by + 表字段 来排序 例如: 在oracle的soc ...
- [转载] 关于“淘宝应对"双11"的技术架构分析”
微博上一篇最新的关于“淘宝应对"双11"的技术架构分析”.数据产品的一个最大特点是数据的非实时写入.