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 ...
随机推荐
- psp0级报告
计划 1.1需求描述: 现在市场上有很多的面向小学生的题卡,但是这习题卡不但价格昂贵,而且每次做题的内容基本都是固定.针对这些问题,开发出了这款网页在线答题系统,每次的题目都有所不同,可以跟快更好提高 ...
- iOS 本地时间 / UTC时间 / 时间戳等操作 / 获取当前年月日
//获得当前时间并且转为字符串 - (NSString *)dateTransformToTimeString { NSDate *currentDate = [NSDate date];//获得当前 ...
- Java多线程——对象组合
我们不希望对每一次的内存访问都进行分析以确保程序是线程安全的,而是希望将一些现有的线程安全组件组合为更大规模的组件或者程序,这里介绍一些组合模式,这些组合模式能够使一个类更容易成为线程安全的,并且在维 ...
- 利用ReentrantLock简单实现一个阻塞队列
借助juc里的ReentrantLock实现一个阻塞队列结构: package demo.concurrent.lock.queue; import java.util.concurrent.lock ...
- Apache Maven的入门使用之常用操作以及核心概念介绍（2）
我们接着上篇文章,来继续介绍Maven中几个核心的概念: POM (Project Object Model) Maven 插件 Maven 生命周期 Maven 依赖管理 Maven 库 POM ( ...
- <VS2017> 编写VC++单元测试 -（一）新建单元测试工程
开发人员自己编写单元测试是一个非常好的习惯.单元测试不但能够验证自己所编写的代码是否存在问题,避免提交给测试人员时才发现bug,也可以为将来改动代码的人提供验证代码功能正确性的途径.在我有限的工作生涯 ...
- [转] Actor生命周期理解
[转] https://blog.csdn.net/wsscy2004/article/details/38875065 镇图:Actor内功心法图 Actor的生命周期可以用Hooks体现和控制,下 ...
- 《Algorithm算法》笔记：元素排序(2)——希尔排序
<Algorithm算法>笔记:元素排序(2)——希尔排序 Algorithm算法笔记元素排序2希尔排序 希尔排序思想 为什么是插入排序 h的确定方法 希尔排序的特点 代码 有关排序的介绍 ...
- java.lang.IllegalStateException: Unknown Priority XXXX 的解决方法
异常信息: java.lang.IllegalStateException: Unknown Priority SYS_ERR_SMS at org.apache.log4j.Category.pri ...
- 解决Ubuntu 18.04中文输入法的问题
https://ywnz.com/linuxjc/1637.html