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代码.神奇的让我来把 ...
随机推荐
- hadoop学习笔记（六）：hadoop全分布式集群的环境搭建
本文原创,如需转载,请注明作者以及原文链接! 一.前期准备: 1.jdk安装 不要用centos7自带的openJDK2.hostname 配置 配置位置:/etc/s ...
- 「JSOI2015」圈地
「JSOI2015」圈地 传送门 显然是最小割. 首先对于所有房子,权值 \(> 0\) 的连边 \(s \to i\) ,权值 \(< 0\) 的连边 \(i \to t\) ,然后对于 ...
- acm数论之旅--组合数（转载）
随笔 - 20 文章 - 0 评论 - 73 ACM数论之旅8---组合数(组合大法好(,,• ₃ •,,) ) 补充:全错排公式:https://blog.csdn.net/Carey_Lu/ ...
- Mybatis 结果集映射
结果映射(resultMap) constructor - 用于在实例化类时,注入结果到构造方法中(一般不用) idArg - ID 参数:标记出作为 ID 的结果可以帮助提高整体性能 arg - 将 ...
- 制作手风琴效果时发现新大陆，好吧，其实是一个bug
手风琴效果代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 4_1 古老的密码（UVa1339)<排序>
古罗马帝国与各部门有一个强有力的政府系统,包括一个秘密服务部门.重要的文件以加密的形式发送防止窃听.在那个时代最流行的密码被称为替代密码和置换密码.例如,应用替代密码,改变所有字母“A”到“Y”字母表 ...
- 解决 C# .NET WebClient WebRequest请求缓慢的问题
[编程环境]Visual Studio 2010, NET4.0 [开发语言]C#, 理论上VB.NET等依赖.NET Framework框架的语言均受此影响 [问题描述] 使用HttpWebRequ ...
- VS中使用C的一些函数报错的问题
VS建议采用带_s的函数,如scanf_s.strcpy_s,但这些并不是标准C函数. 要想继续使用此函数,需要在源文件中添加以下指令就可以避免这个错误提示: #define _CRT_SECURE_ ...
- 忘记linux下的mysql密码，需要重新创建密码123456
你必须要有操作系统的root权限了. # mysqld_safe --skip-grant-tables & &,表示在后台运行,不再后台运行的话,就再打开一个终端咯. # mysql ...
- 洛谷 P3808 【模板】AC自动机（简单版） （AC自动机优化板子）
题中有一个坑点,就是模式串可以相同,并且全部计数. #include <bits/stdc++.h> using namespace std; const int maxn=1e6+10; ...