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 ...
随机推荐
- jquery json实现面向对象 百度十二星座
效果: 源码: index.html <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 大数据-HBase HA集群搭建
1.下载对应版本的Hbase,在我们搭建的集群环境中选用的是hbase-1.4.6 将下载完成的hbase压缩包放到对应的目录下,此处我们的目录为/opt/workspace/ 2.对已经有的压缩包进 ...
- 总纲篇：产品结构设计指导VII（本博客指引章节）
本章目的:搭建自己的产品结构设计知识体系与框架,从零开始设计一个完整产品. 需知远途即捷径! //作者的结构设计体系尚在搭建中,所有的文章都会定期进行一定编排修改 目录: 0)自序 1.基础篇 1)时 ...
- Java代码度量分析工具：Designite简介
前言 在Java面向对象课程的学习过程中,我们需要使用度量工具来分析自己程序的代码结构.此类的度量工具有许多,或以插件形式存在于各个IDE中,或以.jar包的形式供用户使用.在这里,笔者向大家简单的介 ...
- windows server 2012 valid key
好吧,网页三剑客. 1, load disc iso 2,check ip settings, 3,net-inst-server-start 4,power Node, F2 4.1 F7 usbc ...
- 剑指offer——面试题32.1：分行从上到下打印二叉树
void BFSLayer(BinaryTreeNode* pRoot) { if(pRoot==nullptr) return; queue<BinaryTreeNode*> pNode ...
- Mac 10.12安装Git管理工具SourceTree
说明:Git的GUI工具应该是这款最好用. 下载: (链接: https://pan.baidu.com/s/1mhRr35Y 密码: vv67)
- H5+百度地图定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript设计模式-16.装饰者模式（上）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 介绍nodejs中的path模块的几个方法
webpack中常用的: var path = require('path') 是nodejs中的path模块,介绍一下webpack中常用的几个path模块的方法: 应用node环境的时候,这个pa ...