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 ...
随机推荐
- Xcode升级到9.3之后pod问题
最近新建了一个项目,然后在终端pod init的时候出现了问题,复制粘贴部分错误信息 MacBook-Pro:testDemo xywy$ pod init [in /Users/xywy/Deskt ...
- 42.oracle物化视图
写在前面 先大概列一下数据库表设计的常规流程.方案.要遵循的规则 根据业务切分设计表 逻辑分层(数据库分层) 数据库结构设计与拆分:水平拆分(mysql分片)oracle分区物化视图中间表设计方案 优 ...
- 架构师养成记--35.redis集群搭建
前记:redis哨兵经验之谈.哨兵做主从切换可能要花费一两秒,这一两秒可能会丢失很多数据.解决方法之一是在java代码中做控制,try catch 到 链接断开的异常就sleep 一两秒钟再conti ...
- 2016级算法期末模拟练习赛-C.AlvinZH的青春记忆II
1084 AlvinZH的青春记忆II 思路 中等题,二分. 简化题意,一列数字,每秒会自动-1,特殊操作可以使一个数在1s内-k,问这些数都减至0需要多久. 答案肯定在[1,xMax]之间,采用二分 ...
- c#-MVC基础操作-数据的展示及增删改、登录页面及状态保持
一.数据展示 1.View代码: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynam ...
- ThinkPHP 5.0.x SQL注入分析
前言 前段时间,晴天师傅在朋友圈发了一张ThinkPHP 注入的截图.最近几天忙于找工作的事情,没来得及看.趁着中午赶紧搭起环境分析一波.Think PHP就不介绍了,搞PHP的都应该知道. 环境搭建 ...
- WP调用api
private string GetText() { string resultString = string.Empty; HttpWebRequest request = HttpWebReque ...
- JAVA的NIO的新特性和小Demo,进一步了解NIO
1.为什么要用NIO NIO 的创建目的是为了让 Java 程序员可以实现高速 I/O 而无需编写自定义的本机代码.NIO 将最耗时的 I/O 操作(即填充和提取缓冲区)转移回操作系统,因而可以极大地 ...
- WPF中设置了WindowStyle="None"后，窗口仍然有边框的解决方法
1. 设置了窗体的WindowStyle="None",窗口还是右边框,如下图: 2. 这是因为窗体默认是可以改变大小的,所以需要修改ResizeMode的值 ResizeMode ...
- IDEA 启动项目，tomcat中配置的虚拟路径无法使用
有时候,使用idea启动项目,非动静分离项目,直接根据图片url地址显示图片,会发现图片无法显示,tomcat中配置的虚拟路径无法使用,这时候需要配置idea.选择路径,然后给与一个访问名就行了.