效果如图：

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. Gerrit与Gitlab同步配置replication&其他配置

    一.Gerrit与Gitlab同步配置 当配置好gerrit环境后,还需要与现有gitlab库进行同步配置,否则会影响现有开发与打包流程. 1.安装gerrit replication插件 unzip ...

  2. mysql慢查询日志分析工具mysqldumpslow

    一.mysqldumpslow为mysql自带,安装后既带有该工具. 二.mysqldumpslow经常使用的参数 -s,是order的顺序 al 平均锁定时间 ar 平均返回记录时间 at 平均查询 ...

  3. Python开发【十一章】：RabbitMQ队列

    RabbitMQ队列 rabbitMQ是消息队列:想想之前的我们学过队列queue:threading queue(线程queue,多个线程之间进行数据交互).进程queue(父进程与子进程进行交互或 ...

  4. 使用MSMQ 远程队列

    ------------------------------------------------------------------------------------------------- -- ...

  5. jquery选择器和基本语句

    $("#aa"); //根据ID找 $(".aa"); //根据class找 $("div"); //根据标签名找 $("[id= ...

  6. EF 延迟加载和预先加载

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精   本节探讨延迟加载和预先加载 Entity Frame ...

  7. OpenXml Sdk 根据Word模板导出到word

    一:OpenXml Sdk 简介 Open XML标准的简单介绍:Ecma Office Open XML(“Open XML”)是针对字处理文档.演示文稿和电子表格的国际化开放标准,可免费供多个应用 ...

  8. Media Queries使用方法

    1. 最大宽度max-width “max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效.如: @media screen and (max-width ...

  9. Unit01： JAVA开发环境案例

    Top JAVA Fundamental DAY01 JDK及Eclipse目录结构操作 JDK的安装及配置 控制台版的JAVA HelloWorld 使用Eclipse开发Java应用程序 1 JD ...

  10. 基础编程-java之股神

    买了一支股票,他知道从他买股票的那天开始,股票会有以下变化:第一天不变,以后涨一天,跌一天,涨两天,跌一天,涨三天,跌一天...依此类推. 为方便计算,假设每次涨和跌皆为1,股票初始单价也为1,请计算 ...