用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()每次刷新页面后滚动的值有时候会不 ...
随机推荐
- [Error] Error parsing XML: unbound prefix
发生该错误的代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...
- vs2013显示行号
随便打开一个项目,可以看到代码框内并没有显示行号 选择“工具”-“选项”,打开后界面如下 选择文本编辑器,找到下图中的“行号”并勾选 行号可以显示了 5 这样我们就完成了任务
- mybatis 获取自增ID
在Mybatis Mapper文件中添加属性“useGeneratedKeys”和“keyProperty”,其中keyProperty是Java对象的属性名,而不是表格的字段名. <inser ...
- 【leetcode】Best Time to Buy and Sell 3 （hard) 自己做出来了 但别人的更好
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- 混合高斯模型：opencv中MOG2的代码结构梳理
/* 头文件:OurGaussmix2.h */ #include "opencv2/core/core.hpp" #include <list> #include&q ...
- 20145213 《Java程序设计》实验四 Android开发基础
20145213 <Java程序设计>实验四 Android开发基础 说在前面的话 不同以往实验,对于这次实验具体内容我是比较茫然的.因为点我,打开实验四的链接居然能飘出一股熟悉的味道,这 ...
- 有关Java的优秀博客集锦
1. 在java编程中,多线程并发总有些疑惑:如为什么会产生并发?并发会有什么影响?java中提供了哪些处理并发的技术(机制) 关于并发产生的原因,我查了一些资料目前发现有两种原因:一,存在共享的资源 ...
- elipse插件整理
整理一下用过的eclipse插件: 1. WindowBuilder :swing插件,可以拖啊拖啊拖出来一个窗口,可以显著提高开发效率. 官网: http://www.eclipse.org/w ...
- NYOJ题目273字母小游戏
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAswAAAIZCAIAAAA9QP7RAAAgAElEQVR4nO3dPXKjzBqG4bMJ5VqIU2
- JavaScript基础——添加错误处理
JavaScript编程的一个重要组成部分,是添加错误处理来应对可能会出现的问题.默认情况下,如果因为你的JavaScript中的问题二产生了一个代码异常,那么脚本就会失败并且无法完成加载.这通常不是 ...