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代码.神奇的让我来把 ...
随机推荐
- Java基础知识强化95：Calendar类之Calendar类的add()和set()方法
1. Calendar的add()和set()方法: public void add(int field,int amount):根据给定的日历字段和对应的时间,来对当前的日历进行操作 public ...
- NS2仿真：公交车移动周期模型及性能分析
NS2仿真实验报告3 实验名称:公交车移动周期模型及性能分析 实验日期:2015年3月16日~2015年3月21日 实验报告日期:2015年3月22日 一.实验环境(网络平台,操作系统,网络拓扑图) ...
- C#第一节课
1,命名规范 A.如果声明一个变量,小写,如果有多个单词,后面首字母大写 如: string sString="aa"; int iNum=20; bool bMale=false ...
- SQL 2008 清除数据库日志
USE [master]GOALTER DATABASE DNName SET RECOVERY SIMPLE WITH NO_WAITGOALTER DATABASE DNName SET RECO ...
- Avast注册以及更新
昨天无聊在网上看Avast,然后下了玩. Avast有三种版本,免费版,网络版,高级版. 下了个高级版,在贴吧和论坛找激活码,发现大部分都没用,最后找了一个许可文件 关于Avast的注册,有在线和离线 ...
- starting Intent from ProcessRecord with revoked permission android.permission.CALL_PHONE 的错误
昨天写个电话拨号器,很简单就一个Edittext和一个button,用来输入号码并且点击按钮拨打电话,但是写好以后报的是安全错误,我上网查了下,原来是缺少授权,于是我在AndroidManifest. ...
- 在iptables和selinux中放行smb服务
配置selinux [root@localhost samba]# getsebool -a | grep samba 查找selinux中对samba的限制项samba_domain_control ...
- 武汉科技大学ACM：1006: 华科版C语言程序设计教程（第二版）例题4.17
Problem Description 输入一个整数,求它的素数因子.并按照格式输出. Input 一个整数n.(2<=n<=100) Output n=a*b*c*... (a,b,c为 ...
- nginx-301重定向开始
日常工作中使用301重定向的情况很多:如网页目录结构变动,网页重命名.网页的扩展名改变.网站域名改变.SEO优化.等等,301重定向可以很方便的使页面实现跳转. 参考 URL重写模块 一.首先更改配置 ...
- C语言初学 简单计算器计算加减乘除程序
#include<stdio.h> main() { float a,b; char c; printf("输入表达式如a+(* - /)b:\n"); scanf( ...