jQuery瀑布流+无限加载图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
} #contianer {
position: relative;
font-size: ;
margin: auto;
} .box {
padding: 5px;
float: left;
box-sizing: border-box;
} .boximg {
padding: 5px;
box-shadow: 5px #ccc;
border: 1px solid #cccccc;
border-radius: 5px;
} .boximg img {
width: 250px;
height: auto;
position: relative;
}
#mask{
width: 250px;
height: auto;
background: red;
position: absolute;
z-index: ;
}
#mask:hover{
background: salmon;
z-index: ;
}
</style>
这是css代码,具体结构视情况而定
然后是body布局
<div id="container">
<div class="box">
<div class="boximg">
<img src="img/1.jpg">
<div id="mask"></div>
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/8.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/9.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/10.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/11.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/12.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/13.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/14o.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/15.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/3.jpg">
</div>
</div>
</div>
图片引入多少看自己
然后引入jquery-1.8.3.js，(这里其他js文件可不可以我没试过)
最后js代码:
思路如下:
<script>
//思路如下：
$(function() {
var imgWidth = $(".box").innerWidth(); //获得每个div的宽度，包括内边距
var screenWidth = $(window).width(); //获得浏览器可视区域的宽度
var num = Math.floor(screenWidth / imgWidth); //计算一行可以放几个div
$("#container").css({
"width": num * imgWidth + "px",
"margin": "0 auto"
}); //根据每行放的div的总长来给容器一个宽度，然后居中显示
function waterFlow() {
var arr = []; //定义一个数组
for(var i = ; i < $(".box").length; i++) {
if(i < num) { //一行显示num个div,将第一行的每个div高度写入数组
arr[i] = $(".box").eq(i).innerHeight();
} else {
var minImgHeight = Math.min.apply(null, arr); //取得数组中最小高度的div
var index = getMinIndex(arr, minImgHeight); //取得数组中最小高度的div的索引
$(".box").eq(i).css({
"position": "absolute",
"top": minImgHeight + "px",
"left": $(".box").eq(index).offset().left + "px"
}); //瀑布流布局
arr[index] += $(".box").eq(i).innerHeight(); //将布局好的该div的高度和该div上面的div高度相加，重新放入数组
}
}
} function getMinIndex(arr, min) { //取得数组中最小高度的div的索引
for(var i in arr) {
if(arr[i] == min) {
return i;
}
}
} function checkScrollDirector() { //判断滚动条是否滑到底部
var flag = ;
if($(document).scrollTop() + $(window).height() >= $(document).height()) {
flag = ;
}
return flag;
}
console.log($(document).height())
console.log($(window).height())
window.onload = function() {
waterFlow(); //图片加载完毕执行
var json = {
"data": [{
"src": "img/1.jpg"
}, {
"src": "img/2.jpg"
}, {
"src": "img/3.jpg"
}, {
"src": "img/4.jpg"
}, {
"src": "img/5.jpg"
},
{
"src": "img/6.jpg"
}, {
"src": "img/7.jpg"
}, {
"src": "img/8.jpg"
}, {
"src": "img/9.jpg"
}, {
"src": "img/10.jpg"
},
{
"src": "img/11.jpg"
}, {
"src": "img/12.jpg"
}
]
};
window.onscroll = function() { //滚动条滚动执行
if(checkScrollDirector()) {
for(var i = ; i < json.data.length; i++) {
var html = "<div class='box'><div class='boximg'><img src=" + json.data[i].src + "></div></div>";
$("#container").append(html); //向容器内一次性添加12个图片
console.log();
}
waterFlow(); //瀑布流布局
}
}
}
})
</script>
希望你们能用到
jQuery瀑布流+无限加载图片的更多相关文章
- 瀑布流无限加载infinitescroll插件与masonry插件使用
masonry官网地址http://masonry.desandro.com/,infinitescroll官网地址http://www.infinite-scroll.com/ 无限滚动原理:无限滚 ...
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
- js实现瀑布流以及加载效果
一.瀑布流是个啥? 瀑布流,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 最早采用瀑布流布局的网站是Pinteres ...
- jQuery8种不同的瀑布流懒加载loading效果
优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果 在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...
- Jquery实现逐屏加载图片
引用jquery.scrollLoading.js $(document).ready(function () { //实现图片慢慢浮现出来的效果 $("img").load(fu ...
- jQuery瀑布流无限拖三大利器：masonry+imagesloaded+infinitescroll
瀑布流已经是几乎过时的技术了,不过对于很多想要快速实现它的朋友而言,却绝非易事,因为即使我们已经有很多现成的代码,却发现在自己的开发环境中无法快速得到自己想要的结果.就像我们现在要介绍的三大利器(ma ...
- 基于jquery响应式网站图片无限加载瀑布流布局
分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览 源码下载 实 ...
- jQuery实现无限加载瀑布流特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery瀑布流从不同方向加载3种效果演示
很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...
随机推荐
- C#-WebForm-JS知识：基础部分、BOM部分、DOM部分、JS事件
一.基础部分: 1.JavaScript 是什么? 是一门脚本语言,是属于弱类型(语言语法很随意),C#是强类型(语言语法非常严格)(李献策lxc) 优点:JS 执行速度快 2.JS 与java有什么 ...
- 1091 N-自守数 (15 分)
// 建一个判断函数,接受两个整形的变量,再通过循环按位判断相等与否,主体函数中调用被调函数,建立一个判断变量.#include <iostream> using namespace st ...
- [Alpha]Scrum Meeting#9
github 本次会议项目由PM召开,时间为4月11日晚上10点30分 时长10分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写每日例会报告 撰写每日例会报告撰写并整理任务分配博客 SiMrua ...
- java的MethodHandle类详解
一.总述 java7为间接调用方法提供了MethodHandle类,即方法句柄.可以将其看作是反射的另一种方式. 这是使用MethodHandle调用方法的一个例子: public class T ...
- 云服务器、vps、虚拟主机的区别
云服务器 Elastic Compute Service, 简称ECS 好多人理解云服务器和VPS一样,更有甚者说以前的VPS现在的说法就是云服务器,其实不然,云服务器是一个计算,网络,存储的组合.简 ...
- 思维导图让 Spring MVC 不再难懂
spring mvc简介与运行原理 Spring的模型-视图-控制器(MVC)框架是围绕一个DispatcherServlet来设计的,这个Servlet会把请求分发给各个处理器,并支持可配置的处理器 ...
- Paths
Paths 在javax.tools.StandardLocation 枚举类下定义了几个枚举变量,如下: public enum StandardLocation implements Locati ...
- canvas猜数游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Bunder: What does :require => nil in Gemfile mean?
https://stackoverflow.com/questions/12200215/bunder-what-does-require-nil-in-gemfile-mean Require ni ...
- Linux-socket使用
socket 产生的原因 进程通信的概念最初来源于单机系统.由于每个进程都在自己的地址范围内运行,为保证两个相互通信的进程之间既互不干扰又协调一致工作,操作系统为进程通信提供了相应设施,如 UNIX ...