用js实现图片自动加载的瀑布流效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="waterfall.css" type="text/css">
<script src="waterfall.js"></script>
<style>
*{
margin: 0;
padding:0;
}
#content{
position: relative;
background-color: #006000;
}
.box{
padding: 5px;
float: left;
}
.box_img{
padding: 5px;
border: 1px solid #cccccc;
box-shadow: 0 0 5px #cccccc;
border-radius: 5px;
}
img{
width: 150px;
height: auto;
}
</style>
</head>
<body>
<div id="content">
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/kitten-medium.png">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/kitten-medium.png">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/kitten-medium.png">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/kitten-medium.png">
</div>
</div> </div>
<script>
/**
* Created by asua on 2016/4/9.
*/
window.onload=function(){
imgLocation("content","box");
var lodeImage={"Date":[{"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()){
for(var i=0;i<lodeImage.Date.length;i++){
var box=document.createElement("div");
box.className="box";
var cparent=document.getElementById("content");
cparent.appendChild(box);
var box_img=document.createElement("div");
box_img.className="box_img";
box.appendChild(box_img);
var img=document.createElement("img");
img.src="Img/"+lodeImage.Date[i].src;
box_img.appendChild(img);
}
imgLocation("content","box");
}
}
}
function checkFlag(){
var cparent=document.getElementById("content");
var ccontent=getChildElement(cparent,"box");
var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
console.log(lastContentHeight+":"+scrollHeight+":"+pageHeight);
if(lastContentHeight<scrollHeight+pageHeight){
return true;
}
}
function imgLocation(parent,child){
var cparent=document.getElementById(parent);
var ccontent=getChildElement(cparent,child);
var imgwidth=ccontent[0].offsetWidth;
var cols=Math.floor(document.documentElement.clientWidth/imgwidth);
cparent.style.cssText="width:"+imgwidth*cols+"px;margin:30px auto";
var heightArr=[];
for(var i=0;i<ccontent.length;i++){
if(i<cols){
heightArr.push(ccontent[i].offsetHeight);
}else{
var minHeight=Math.min.apply(null,heightArr);
var minIndex=getMinIndex(heightArr,minHeight);
ccontent[i].style.position="absolute";
ccontent[i].style.top=minHeight+"px";
ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
heightArr[minIndex]+=ccontent[i].offsetHeight;
}
}
}
function getMinIndex(heightArr,minHeight){
for(var i=0;i<heightArr.length;i++){
if(heightArr[i]==minHeight){
return i;
}
}
}
function getChildElement(parent,content){
var contentArr=[];
var allcontent=parent.getElementsByTagName("*");
for(var i=0;i<allcontent.length;i++){
if(allcontent[i].className==content){
contentArr.push(allcontent[i]);
}
}
return contentArr;
}
</script>
</body>
</html>
用js实现图片自动加载的瀑布流效果的更多相关文章
- js原生图片懒加载 或 js原生图片预加载，html标签自定义属性
使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
- js图片未加载完显示loading效果
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
- 页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
- js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...
- js插件---图片懒加载lazyload
js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...
- JS实现图片懒加载插件
一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
- js, javascript 图片懒加载 实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js判断图片是否加载完毕
附件: https://www.jb51.net/article/102385.htm 问题: .offset().top和$(window).scrollTop()每次刷新页面后滚动的值有时候会不 ...
随机推荐
- 《Java语言程序设计》上机实验
实验一 Java环境演练 [目的] ①安装并配置Java运行开发环境: ②掌握开发Java应用程序的3个步骤:编写源文件.编译源文件和运行应用程序: ③学习同时编译多个Java源文件. [内容 ...
- Linux集群配置ntp时间同步服务
集群中时间不同步有可能会让大数据的应用程序运行混乱,造成不可预知的问题,比如Hbase,当时间差别过大时就会挂掉,所以在大数据集群中,ntp服务,应该作为一种基础的服务,以下在演示在CentOS 7. ...
- Common Knowledge_快速幂
问题 I: Common Knowledge 时间限制: 1 Sec 内存限制: 64 MB提交: 9 解决: 8[提交][状态][讨论版] 题目描述 Alice and Bob play som ...
- 【leetcode】Restore IP Addresses (middle)
Given a string containing only digits, restore it by returning all possible valid IP address combina ...
- 【leetcode】Insertion Sort List （middle）
Sort a linked list using insertion sort. 思路: 用插入排序对链表排序.插入排序是指每次在一个排好序的链表中插入一个新的值. 注意:把排好序的部分和未排序的部分 ...
- 用fontAwesome代替网页icon小图标
1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...
- RAD Studio/Delphi 2010 3615下载+破解
RAD Studio/Delphi 2010 3615下载+破解 官方下载地址: http://altd.embarcadero.com/download/RADStudio2010/delphicb ...
- Java IO流总结
Java IO流分类以及主要使用方式如下: IO流 |--字节流 |--字节输入流 InputStream: int read();//一次读取一个字节 int read(byte[] bys);// ...
- [Android ] linux命令英文缩写的含义（方便记忆）
du -sh */ reference to : http://blog.chinaunix.net/uid-27164517-id-3299073.html linux常用命令的英文单词缩写 命令缩 ...
- 项目之solr全文搜索工具之创建项目索引库
以创建项目baotao core为例 1. 在example目录下创建baotao-solr文件夹: 2. 将./solr下的solr.xml拷贝到baotao-solr目录下: 3. 在bao ...