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 ...
随机推荐
- 半年的iOS代码生活
半年的iOS代码生活 在高考大军中拼杀过,也在大学校园中荒芜过,曾经低迷消沉,也常满怀壮志…… 但是最多的还是被称为小伙子以及自称为iOS工程师!博主就是这种喜闻乐见的这类人,实习一年后在2015年的 ...
- Java NIO学习与记录（八）： Reactor两种多线程模型的实现
Reactor两种多线程模型的实现 注:本篇文章例子基于上一篇进行:Java NIO学习与记录(七): Reactor单线程模型的实现 紧接着上篇Reactor单线程模型的例子来,假设Handler的 ...
- 第3章—高级装配—条件化的Bean
条件化的Bean 通过活动的profile,我们可以获得不同的Bean.Spring 4提供了一个更通用的基于条件的Bean的创建方式,即使用@Conditional注解. @Conditional根 ...
- SecureCRTPortable的安装和使用（图文详解）
不多说,直接上干货! 玩玩这个远程连接软件,是个绿色软件. 别人已经做好了的. 解压之后, 下面,软件展示下, 这会默认去打开, 为了,方便,使用,放到桌面,作为快捷方式 成功 欢迎大家,加入我的微信 ...
- python-Lock锁线程同步和互斥
#!/usr/bin/python #coding=utf-8 #线程间通信的同步与互斥操作-锁 import threading a=b=0 lock=threading.Lock() def va ...
- CentOS 6.4下安装 Mono 3.2 和Jexus 5.4
1.安装Mono源码安装需要的库 yum -y install gcc gcc-c++ bison pkgconfig glib2-devel gettext make libpng-devel li ...
- <数据挖掘导论>读书笔记10聚类分析续
基于原型的聚类 模糊c均值使用模糊逻辑和模糊集合论的概念,提出一种聚类方案,它很像K均值,但是不需要硬性地将对象分派到一个簇中.模糊c均值算法有时也称为FCM 混合模型聚类采取这样的访谈,簇集合可以用 ...
- CUBA与Spring相比，有很大的不同吗？
原文:Developing with CUBA - a big shift from Spring? 翻译:CUBA China CUBA-Platform 官网 : https://www.cuba ...
- 相片Exif协议
今天看他们安卓在做项目遇到一个要让旋转拍摄的相片竖屏方向显示 ,网上搜了下找到了安卓的一个博客,看了下想着既然安卓有ios也应该会有,果然不出所料,确实是有.其实他们都是遵循Exif协议,百度百科也有 ...
- HTML5--(1)兼容前缀+结构性标签+语义化标签
一.兼容前缀+兼容写法 兼容前缀 1.HTML5有部分类容兼容到IE9,IE8及以下完全不兼容的内容不再考虑. 2.部分内容需要加兼容前缀 a) -webkit- 兼容谷歌 b) -m ...