<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
var arr=[]; //存放每一列的高度
var boxw=$(".box:first").outerWidth(true);
// width本身宽innerWidth width+padding outerWidth() width+padding+border outerWidth(true) width+padding +border+margin
var ww=$(window).width();
var col=Math.floor(ww/boxw);
$("#wrapper").width(col*boxw).css("margin","0 auto");
var pics=["images/37.jpg","images/38.jpg","images/39.jpg","images/40.jpg","images/41.jpg"]
$(window).scroll(function(){
if(isLoad()){
console.log("load...");
$.each(pics,function(i,ele){
var box = $("<div class='box'></div>");
$("<div class='pics'></div>").html('<img src="'+ele+'" />').appendTo(box);
box.appendTo($("#wrapper"));
})
waterWall();
}
})
waterWall();
function waterWall(){
$(".box").each(function(index){
if(index<col){ // 第一行
arr[index]=$(this).outerHeight();
}
else{ //从第二行开始的下标就大于col

var minH = Math.min.apply(null,arr); //找到最小高度的值
var minIndex=$.inArray(minH,arr); // indexOf //找到最小高度的值在数组中的索引
$(this).css({ //定位当前元素
position:'absolute',
//top:minH+"px", //top 设为最小值 minH
left:boxw+"px" //从哪漂过来
}).animate({
left:boxw*minIndex+"px", //关键 left值设为最小值的索引与一个box宽度的积
top:minH+"px" //设这个值会有高度上的动画
})
arr[minIndex]+=$(this).outerHeight();//刷新最小列的高度
}
});
}
function isLoad(){
var pos=$(".box:last").offset().top+Math.floor($(".box:last").outerHeight()/2);
var ws=$(window).height()+$(window).scrollTop();
if(pos<ws){
return true;
}
else{
return false;
}
}
});
</script>
</head>
<body>
<div id="wrapper" style="height:3000px">
<div class="box">
<div class="pics">
<img src="data:images/0.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/10.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/11.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/13.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/14.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/15.jpg" alt="">
</div>
</div>
</div>
</body>
</html>

JQuery瀑布流特效（练习）的更多相关文章

  1. jQuery实现无限加载瀑布流特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 网友微笑分享原创Jquery实现瀑布流特效

    首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...

  3. jQuery瀑布流从不同方向加载3种效果演示

    很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...

  4. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  5. jquery瀑布流排列样式代码

    <!DOCTYPE html><html><head lang="en"> <meta charset="gb2312" ...

  6. jquery瀑布流的制作

    首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...

  7. jQuery瀑布流插件——jQuery.Waterfall

    插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...

  8. 炫酷的jquery瀑布流

    最近做了一个瀑布流效果,思路很简单 首先计算屏幕一行可以放多少个图片,然后在第二行开始,计算每一列的高度并取出最小值,将新图片加载在最小列高度下,如此循环,并且设定一个条件,当滑动到一定距离后,开始重 ...

  9. jQuery瀑布流无限拖三大利器：masonry+imagesloaded+infinitescroll

    瀑布流已经是几乎过时的技术了,不过对于很多想要快速实现它的朋友而言,却绝非易事,因为即使我们已经有很多现成的代码,却发现在自己的开发环境中无法快速得到自己想要的结果.就像我们现在要介绍的三大利器(ma ...

随机推荐

  1. 札记：翻译-使用Scene和Transition实现【场景切换】动画效果

    简述:transitions framework 下面翻译transition为"过渡",强调动画过程的含义,不过更多时候使用transition单词本身. Android 4.4 ...

  2. 一道面试题（C语言）

    题:输入一个数,列出所有加和等于该数的式子. 分析: 以 6 为例: 从上面的分析就比较容易找到规律了. C语言代码: #include <stdio.h> int main() { in ...

  3. Java正则表达式API详解

    1. Pattern类 public class PatternExample { /** * public static String quote(String s) * 返回指定字符串的字面值模式 ...

  4. 大数据搜索引擎之elasticsearch使用篇（一）

    作者:yanzm 原文来自:https://bbs.ichunqiu.com/thread-42421-1-1.html 1.基础介绍 本期,我们将着重介绍elasticsearch的基本使用方法. ...

  5. 动态页面技术EL

    1.EL概述: EL表达式可以嵌入再JSP页面内部,减少JSP脚本的编写 EL出现的目的是要替代JSP页面中脚本的编写 EL最重要的作用就是从域中取出数据: 引入: JSP中<%=request ...

  6. [Python列表]-索引

    Python 列表(List) 前言 序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内 ...

  7. 7.28-说说对javaweb的感想吧

    接触了几个月的java,和javaweb. 感想1:发现生活顿时充实了很多,时间照样在过,日落日出,但是手里面有学的,有可以让自己开心地码出理想的效果,这是很不错的结局. 发现自己再也不回去和伙伴们撸 ...

  8. TCP/IP 笔记 - 地址解析协议

    地址解析协议(ARP)提供了一种在IPv4地址和各种网络技术使用的硬件地址之间的映射.ARP仅用于IPv4,IPv6使用邻居发现协议,它被合并入ICMPv6.地址解析是发现两个地址之间的映射关系的过程 ...

  9. 字符串replaceAll()方法报错：java.util.regex.PatternSyntaxException:Unclosed group near index...

    Unclosed group near index错误 之前自己写的一个模块在项目上线后最近频频出现tomcat崩掉的情况,从log看出现如下的报错信息: java.util.regex.Patter ...

  10. Vue + Element UI 实现权限管理系统 前端篇（十二）：用户管理模块

    用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口. import axios from '../axios' /* * 用户管理模块 */ // 保存 exp ...