效果如图：

html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/image.css"/>

        <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>

        <script type="text/javascript" src="js/image.js" ></script>

    </head>

    <body>

        <div class="content">

            <div class="box">

                <div class="img_box"><img src="img/1.jpg" alt="" /></div>

            </div>

            <div class="box">

                <div class="img_box"><img src="img/2.jpg" alt="" /></div>

            </div>

            <div class="box">

                <div class="img_box"><img src="img/3.jpg" alt="" /></div>

            </div>

            <div class="box">

                <div class="img_box"><img src="img/4.jpg" alt="" /></div>

            </div>

            <div class="box">

                <div class="img_box"><img src="img/5.jpg" alt="" /></div>

            </div>

            <div class="box">

                <div class="img_box"><img src="img/6.jpg" alt="" /></div>

            </div>

            <div class="box">

                <div class="img_box"><img src="img/7.jpg" alt="" /></div>

            </div>

            <div class="box">

                <div class="img_box"><img src="img/8.jpg" alt="" /></div>

            </div>

        </div>

    </body>

</html>

css:

* {

    padding:;

    margin:;

}

.content {

    position: relative;

}

.box {

    float: left;

    padding: 12px 0px 0px 10px;

}

.img_box {

    padding: 10px;

    border: solid 1px black;

    border-radius: 10px;

    box-shadow: 5px 5px 5px 2px darkgray;

}

.img_box:hover {

    margin: 12px;

    box-shadow: 3px 3px 3px 3px darkgray;

}

img {

    width: 400px;

}

.toast {

    position: fixed;

    width: 170px;

    height: 50px;

    text-align: center;

    line-height: 50px;

    box-shadow: 5px 5px 5px 2px darkgray;

    border-radius: 20px;

    background: cornflowerblue;

    top: 600px;

    left: 600px;

    color: white;

    font-weight: bold;

    font-size: 20px;

}

js:

$(document).ready(function() {

    window.onload = init; //当图片加载完后

    window.onscroll = sc; //当滚动进度条时

    $(window).resize(init); //当浏览器页面大小改变时

    function sc() {

        //如果屏幕可见高度+滚动高度>=最后一张图片的高度+最后一张图片的一半，那么自动加载

        if(($(window).scrollTop() + document.documentElement.clientHeight) >=

            ($(".box").last().position().top + $(".box").last().outerHeight() / 2)) {

            //加载更多

            for(var i = 1; i < 26; i++) {

                $(".content").append("<div class=\"box\"><div class=\"img_box\"><img src=\"img/" + i + ".jpg\" /></div></div>");

            }

            $("body").append("<div class=\"toast\">加载中……</div>");

            //设置延时自动关闭

            setTimeout(function() {    $(".toast").hide(200);}, 1000)

            init();

        }

    }

    function init() {

        /**

         * 瀑布流图片代码分析

         * 得到第一行图片个数、最短图片位置

         * 个数：总长度/box长度

         */

        //得到屏幕长度

        var clientW = document.body.clientWidth;

        //得到单个box的长度

        var box = $(".box").outerWidth();

        //得到一行的个数

        var count = parseInt(clientW / box);

        //把图片在页面中居中

        $(".content").css({

            marginLeft: (clientW - box * count) / 2

        })

        var start = 0;

        var end = start + count;

        //循环，把个数的高传入数组

        var arr = [];

        $(".box").slice(start, end).each(function() {

            arr.push($(this).outerHeight());

        })

        //循环，每次都要改变最短图片的位置

        $(".box").each(function(n) {

            //得到最短的图片及它所出现的位置，从0开始

            var minHei = Math.min.apply(null, arr);

            var posit = $.inArray(minHei, arr);

            //即将要出现的图片的左边距就是位置*box长度

            var width = posit * box;

            //如果是第一行后面的图片

            if(n >= count) { //如果是除第 一行后的后面几张

                $(this).css({

                    "position": "absolute",

                    "left": width,

                    "top": minHei,

                });

                arr[posit] += $(this).outerHeight();

            }

        })

    }

})

jquery+javaScript完成瀑布流图片页面效果的更多相关文章

  1. jQuery实现AJAX定时刷新局部页面实例

    本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax ...

  2. jQuery淡入淡出瀑布流效果

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

  3. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  4. 元素视差方向移动jQuery插件-类似github 404页面效果

    原文地址:http://www.xuanfengge.com/shake.html 前言: 视差滚动,大家也许并不陌生.但是对于视差方向移动,你是否有见过效果呢?看官请进来瞧瞧~ demo : 轩枫阁 ...

  5. 使用 JavaScript 的 HTML 页面混合、根据在下拉列表框中选择的内容，决定页面效果，用户在下拉列表框中选择页面将要使用的背景颜色

    查看本章节 查看作业目录 需求说明: 根据在下拉列表框中选择的内容,决定页面效果 用户在下拉列表框中选择页面将 要使用的背景颜色 当用户选择橙色时,页面背景将显示为橙色 实现思路: 用表单 <s ...

  6. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  7. javascript仿天猫加入购物车动画效果

    javascript仿天猫加入购物车动画效果   注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...

  8. 利用jquery+iframe做一个ajax上传效果

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  9. Ajax+json+jquery实现无限瀑布流布局

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. RFID电子标签天线的印刷

    RFID 电子标签技术又称RFID(Radio FrequencyIdentification)射频识别技术,是一种非接触式的自动识别技术,通过相距几厘米到几米距离内传感器发射的无线电波,可以读取RF ...

  2. scala的面向对象编程

    1.scala的简单编程 2.构造方法 辅助构造函数是在主构造函数没有的情况下,执行的构造函数. 3.object的介绍 4.半生类和半生对象 5.半生的案例程序(半生类可以调用半生) 6.apply ...

  3. Linux 基础命令-CURL 表单上传文件

    CURL -F, --form <name=content> (HTTP) This lets curl emulate a filled-in form in which a user ...

  4. C++ 环形缓冲区的实现

    参考文章:http://blog.csdn.net/linyt/article/details/53355355 本文参考linux系统中 kfifo缓冲区实现.由于没有涉及到锁,在多线程环境下,只适 ...

  5. ios导航器跳转动画

    出栈或压栈简单实现动画   CATransition *animation1=[CATransition animation];//类方法创建一个切换对象     animation1.duratio ...

  6. MFC操作excel

    环境:VS2013+office2007 头文件: #pragma once #ifndef __MYEXCEL_H_ #define __MYEXCEL_H_ #include "CApp ...

  7. LINQ教程

    在说LINQ之前必须先说说几个重要的C#语言特性 一:与LINQ有关的语言特性 1.隐式类型 (1)源起 在隐式类型出现之前, 我们在声明一个变量的时候, 总是要为一个变量指定他的类型 甚至在fore ...

  8. 微信小程序开发POST请求

    onLoad: function() { that = this; wx.request( { url: "http://op.juhe.cn/onebox/weather/query&qu ...

  9. http的一些事

    查找资料将http中缓存相关的知识记录下 一般来说:Last-Modifed和Expires是一对,ETag和Cache-Control是一对 Last-Modified Client端跟Server ...

  10. stream数据流

    首先必须先要了解Buffer,Buffer是js和c++的结合体,类数组,通常与Stream一起用: 1. (1).Buffer是个类,因此可以构建成对象 (2).buf具有数组的性质 字符串转换成二 ...