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下查看用户列表
原文地址:http://xiaod.in/read.php?77 俺的centos vps上面不知道添加了多少个账户,今天想清理一下,但是以前还未查看过linux用户列表,google了一下,找到方便 ...
- Spark HA 的搭建
接hadoop HA的搭建,因为你zookeeper已经部署完成,所以直接安装spark就可以 tar –xzf spark-1.6.1-bin-hadoop2.6.tgz -C ../service ...
- Configuring Network Configuration-RHEL7
1.查看网络状态systemctl status NetworkManager You can use the systemctl status NetworkManager command to ...
- 安装android studio 出现的路径问题 tools.jar' seems to be not in Android Studio classpath
尝试一下android studio ,谁知出现路径问题 'tools.jar' seems to be not in Android Studio classpath. Please ensure ...
- Python：代码调试的好帮手sys._getframe()
python 的调试,令人非常忧伤,通过将输出路径打印的方式,可以提高很大的方便性: import sys #coding=utf-8 def get_cur_info(): print sys._g ...
- (转徐明吉)C#生成随机数
private static char[] constant = { ', 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p ...
- spring aop原理分析
持续更新... aop跟java代理模式有关. java.lang.reflect.Proxy java.lang.reflect.InvocationHandler 工厂模式用到java反射. ao ...
- Android时间戳转换为标准Datetime（yyyy-MM-dd hh:mm:ss)格式
下列函数为实现过程,已经测试通过. /// <summary> /// Android时间戳转换为标准Datetime /// </summary> /// <param ...
- js设置元素的onclick传参方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- Nginx 反向代理配置实例（转）
user www www; worker_processes ; error_log logs/error.log notice; pid logs/nginx.pid; worker_rlimit_ ...