<!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. Android、JavaScript、WebView之间的交互学习

    一.WebView调用Java //1.允许WebView加载jsmWebView.getSettings().setJavaScriptEnabled(true); //2.编写js的接口 ---- ...

  2. git checkout tags with the same name as a branch

    显式指定某个 tag git checkout refs/tags/ git checkout refs/tags/v0.1 显式指定某个 branch git checkout refs/heads ...

  3. ELK实战（Springboot日志输出查找）

    需求 把分布式系统,集群日志集中处理快速查询 搭建ELK并与springboot日志输出结合 搭建ELK 基于我前面的elasticsearch搭建博客文档docker-compose.yml基础上进 ...

  4. shell 中的三种引号的作用

    1. 单引号(' ') 单引号里的任何字符都会原样输出,单引号字符串中的变量是无效的: 单引号字串中不能出现单独一个的单引号(对单引号使用转义符后也不行),但可成对出现,作为字符串拼接使用. 2. 双 ...

  5. Leetcode：148_Sort List | O(nlogn)链表排序 | Medium

    题目:Sort List Sort a linked list in O(n log n) time using constant space complexity 看题目有两个要求:1)时间复杂度为 ...

  6. LeetCode--No.016 3Sum Closest

    16. 3Sum Closest Total Accepted: 86565 Total Submissions: 291260 Difficulty: Medium Given an array S ...

  7. 看看一个老程序员如何手写SpringMVC！

    人见人爱的Spring已然不仅仅只是一个框架了.如今,Spring已然成为了一个生态.但深入了解Spring的却寥寥无几.这里,我带大家一起来看看,我是如何手写Spring的.我将结合对Spring十 ...

  8. Windows下memcache的配置和使用(python)

    1.memcache的安装和配置: 下载memcache  for windows: http://up.2cto.com/2012/0522/20120522094758371.rar 解压到指定目 ...

  9. 爽爽的GSON解析

    Gson解析的各种详细用法我就不说了. 说说我在项目具体遇到的. 当前公司的JSON解析基本上通过阿里的fastjson,以及JSONObject,JSONArray来解析.那种让我无语的感觉不是言语 ...

  10. SpringCloud Eureka服务注册及发现——服务端/客户端/消费者搭建

    Eureka 是 Netflix 出品的用于实现服务注册和发现的工具. Spring Cloud 集成了 Eureka,并提供了开箱即用的支持.其中, Eureka 又可细分为 Eureka Serv ...