JS 瀑布流效果
JS瀑布流效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS瀑布流效果</title>
<style>
* {
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 #ccc;
border-radius: 5px;
} .box_img img {
width: 150px;
height: auto;
}
</style>
</head>
<body>
<div id="container">
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
<div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>
</div> <script>
window.onload = function () {
imgLocation("container", "box");
var imgData = {
"data": [{ "src": "1.jpg" }, { "src": "2.jpg" }, { "src": "3.jpg" }, { "src": "4.jpg" }, { "src": "5.jpg" },
{ "src": "6.jpg" }, { "src": "7.jpg" }, { "src": "8.jpg" }, { "src": "9.jpg" }, { "src": "10.jpg" }]
};
window.onscroll = function () {
if (checkFlag()) {
var cparent = document.getElementById("container");
for (var i = 0; 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 = "/Scripts/img/img1/" + 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 - 1].offsetTop;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
console.log(lastContentHeight + " " + scrollTop + " " + pageHeight);
if (lastContentHeight < scrollTop + pageHeight) {
return true;
}
} function imgLocation(parent, content) {
//将parent下的所有的content全部取出
var cparent = document.getElementById(parent);
var ccontent = getChildElement(cparent, content);
console.log(ccontent);
var imgWidth = ccontent[0].offsetWidth;
var num = Math.floor(document.documentElement.clientWidth / imgWidth);
cparent.style.cssText = "width:" + imgWidth * num + "px;margin:0px auto;"; var boxHeightArr = [];
for (var i = 0; i < ccontent.length; i++) {
if (i < num) {
boxHeightArr[i] = ccontent[i].offsetHeight;
console.log(boxHeightArr[i]);
}
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 allConnect = parent.getElementsByTagName("*");
for (var i = 0; i < allConnect.length; i++) {
if (allConnect[i].className == content) {
contentArr.push(allConnect[i]);
}
}
return contentArr;
}
</script>
</body>
</html>
JS 瀑布流效果的更多相关文章
- 面向对象js瀑布流效果
index.html <!doctype html><html lang="en"> <head> <!--网站编码格式,UTF-8 国 ...
- JS瀑布流效果
本篇内容实现类似百度图片的呈现功能,瀑布流+自动加载 index13.html <!DOCTYPE html> <html> <head> <meta cha ...
- 手把手教你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代码.神奇的让我来把 ...
随机推荐
- org.apache.catalina.connector.ClientAbortException: java.io.IOException: 你的主机中的软件中止了一个已建立的连接。
org.apache.catalina.connector.ClientAbortException: java.io.IOException: 你的主机中的软件中止了一个已建立的连接. at org ...
- 请描述一下 cookies，sessionStorage 和 localStorage 的区别
原文:http://blog.csdn.net/lxcao/article/details/52809939 相同点:都存储在客户端不同点: 1.存储大小 cookie数据大小不能超过4k. sess ...
- 数据库中的null，踩坑笔记
问题来源:查询表中,complete_type 不为2的数据. 我的想法:select * from 表名 where complete_type != '2' (除了第2条,全部显示,没问题呀) ...
- django的静态文件配置和路由控制
上一篇写到刚建完django项目,此时我登录页面中调用了js文件,执行后发现报错了找不到js这个文件 目录结构如图所示: <!DOCTYPE html> <html lang=&qu ...
- js下false情况
//为false的情况 false null NaN undefined "" 0
- RemoteView设置高度
刚开始内层LinearLayout直接用 android:layout_height="match_parent" <?xml version="1.0" ...
- 【MYSQL建库和建表】MYSQL建库和建表
1.Navicat创建Mysql数据库 2.创建创建用户表和索引 CREATE TABLE `t_user` ( `id` ) NOT NULL AUTO_INCREMENT COMMENT '主键' ...
- CSS样式的优先级(权重)
当使用不同的选择器选中同一个元素并设置相同样式时,这时样式间产生了冲突 最终采用的是哪个选择器? 由选择器的优先级(权重)决定,权重高的优先显示 优先级规则(多个按位置分别进行计算,不进位): 内联样 ...
- Passive Client Feature
Q. How is the passive client feature used on Wireless LAN Controllers? A. Passive clients are wirele ...
- UNL/EVE关联putty和wireshark
这里默认UNL已经安装完毕,然后启动虚拟机启动UNL. 在浏览器输入http://192.168.1.199/ 进入UNL.然后简单的搭建一个拓扑: 这里只讲R1和ASA开启,先来配置Telnet功能 ...