jQuery的简单应用

　　时隔多日, 终于我又有时间来浏览些新知识了, 并不是偷懒什么的, 只是真的好忙, 看似闲暇的时间总是冒出一些模糊而又不得不做的事情, 今日终于我又有时间了, 可以看下jQuery了, 并根据自己的了解尝试着写了些demo, 就拿简单而又不失流行的瀑布流来说吧, 虽然看似简单, 但是做起来却并不是那么的容易, 以前对于这种瀑布流来说, 是可望而不可及啊, 尝试着用ios写, 但是总重因为种种原因终止了此项进程, 而今日我又重操往日的目标, 用不一样的语言来实现了这个功能, 还是有些许的欣慰的, 那么接下来就让我来给大家简单的说说吧.

　　一.准备工作

　　要进行此项任务的开工, 那么我们就不得不做充分的准备, 首先我们要去JQuery官网下载相应的文件网址如下:jquery.com, 由于网速原因, 在这里就不给大家一一详解了, 不过待大家进去后就会看到有个download, 然后进去下载就好, 里面对文档的解释也很详细, 有对css样式的操作和对H5的操作, 下载完成后的工程是这样的:jquery-2.1.4.min.js, 这就是下载的工程名字, 然后准备工作就算是ok了.

　　二.编码前沿

　　在下载完成后, 我们首先要打开开发环境, 将我们下载好的JQuery文件给拷贝进去, 然后在建好的h5页面进行引入, 当然引入这个还是不够的, 因为难免在布局时间会用到js和css文件, 所以我们要一并创建和引入, 结果如下:

　　要注意了, 引入顺序也是有要求的, 我们应当先引入JQuery文件, 其次才能引入其他文件, 那么编码前沿的工作也就做的差不多了, 接下来就是滤清思路开始编码了.

　　　三.瀑布流的实现思路

　　所谓瀑布流, 也就是说图片宽度一样, 高度不同, 在第一行铺满图片的时候, 普第二行的时候, 我们要把要摆放的第一张图片放到第一行图片高度最小得那张图片下面, 然后再把摆放后的高度和第一行最短高度的图片进行叠加, 再次进行摆放, 依次重复此操作, 直到图片摆放完全, 那么我们的瀑布流就彻底的完成了, 接下来就可以看到完美的瀑布流效果了, 大致思路就是这样的, 相比很多人都是知道的, 哈哈!

　　四.编码阶段

　　　在接下来的编码阶段我会每行代码都带上注释, 方便让大家看清楚, 可以彻底明白整个思路, 那么就算前面的描述有所模糊, 在下面的代码中也可以消除大家的疑惑了, 首先将准备好的图片拷贝到工程中, 然后在h5页面中书写下如下代码:

<body>

    <div id="container">//主容器

        <div class="box">//容纳图片盒子的

            <div class="contend">//容纳图片目的是为了给其边框效果, 下面都是一样的

                <img src="img/1.jpeg">

            </div>

        </div>

        <div class="box">

            <div class="contend">

                <img src="img/2.jpg">

            </div>

        </div>

        <div class="box">

            <div class="contend">

                <img src="img/3.jpg">

            </div>

        </div>

        <div class="box">

            <div class="contend">

                <img src="img/4.jpg">

            </div>

        </div>

        <div class="box">

            <div class="contend">

                <img src="img/5.jpg">

            </div>

        </div>

        <div class="box">

            <div class="contend">

                <img src="img/6.jpg">

            </div>

        </div>

        <div class="box">

            <div class="contend">

                <img src="img/7.gif">

            </div>

        </div>

        <div class="box">

            <div class="contend">

                <img src="img/8.jpg">

            </div>

        </div>

        <div class="box">

            <div class="contend">

                <img src="img/9.jpg">

            </div>

        </div>

        <div class="box">

            <div class="contend">

                <img src="img/8.jpg">

            </div>

        </div>

        <div class="box">

            <div class="contend">

                <img src="img/3.jpg">

            </div>

        </div>

        <div class="box">

            <div class="contend">

                <img src="img/6.jpg">

            </div>

        </div>

        <div class="box">

            <div class="contend">

                <img src="img/2.jpg">

            </div>

        </div>

    </div>

</body>

　　之后在css文件中给这些div设置样式, 具体操作如下所示:

css中的代码

*{//通配符, 去掉所有的内外边距

    padding: 0px;

    margin: 0px;

}

.box{//设置内边距和浮动保证图片是逐次排开的

    padding: 1px;

    float: left;

}

.contend{//设置边框粗细和颜色装扮样式和阴影效果

    border: 2px solid gray;

    border-radius: 5px;

    box-shadow: 0 0 10px red;

}

img{//设置图片宽度为定制高度自适应保证图片不失真

    width: 200px;

    height: auto;

}

　　之后也是最关键的一步了, 就是在js文件中书写JQuery代码, 实现核心功能, 详细如下所示:

js中的代码

$(document).ready(function(){//判断文档是否准备完成

   $(window).on("load",function(){//加载文档

        ImageLocation();//此方法是为了确定图片位置

       //模拟数据源, 自定义json字符串, 设置无限滚动加载

       var dataImg = {"data":[{"src":"8.jpg"},{"src":"5.jpg"},{"src":"3.jpg"},{"src":"9.jpg"},{"src":"8.jpg"},{"src":"6.jpg"},{"src":"5.jpg"},{"src":"4.jpg"},{"src":"3.jpg"}]}

       //下面这个方法是在滚动鼠标或者滑动滚动条时间执行的, 目的在于判断何时开始加载图片, 我定义的是最后一张图片的一半的时候开始加载数据

       window.onscroll=function(){

            if(scollToSide()){

                $.each(dataImg.data,function(index,value){

                    var box = $("<div>").addClass("box").appendTo("#container");//创建div标签追加在主容器之后, 用来承载图片盒子

                    var contend = $("<div>").addClass("contend").appendTo(box);//创建内容容器, 装饰图片样式

                    $("<img>").attr("src","./img/"+$(value).attr("src")).appendTo(contend);//加载图片

                });

            }

           ImageLocation();//重新调用确定图片位置方法, 以确保图片位置摆放和之前一样

       }

   }) ;

});

//此方法是为了判断何时加载, 当最后一张图片的高度小于屏幕窗口高度和滚动条滚动距离的时候开始加载, 否则不加载

function scollToSide(){

    var box = $(".box");

    var lastHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);//Math方法目的在于将小数化为整数

    var screenHeight = $(document).width();

    var scrollHeight = $(window).scrollTop();

    return lastHeight < (screenHeight + scrollHeight) ? true:false;

}

//确定图片摆放位置

function ImageLocation(){

    var screenWidth = $(window).width();//获取当前屏幕宽度

    var box = $(".box");//获取所有的box容器

    var ImgWidth = box.eq(0).width();//获取图片宽度

    var num = Math.floor(screenWidth / ImgWidth);//判断一个屏幕宽度内最多可以容纳多少张图片

    var ary = [];//声明数组

    box.each(function(index, value){

        if(index<num){

            ary[index]=box.eq(index).height();//承载第一行图片的高度

        } else {

            var minHeight = Math.min.apply(null,ary);//取到第一行高度的最小值

            var minIndex = $.inArray(minHeight,ary);//计算出最小高度的位置

            $(value).css({//添加样式

                top:minHeight,

                left:box.eq(minIndex).position().left,

                position:"absolute"

            });

            ary[minIndex]+=box.eq(index).height();//进行高度叠加, 方便后面图片位置的确定

        }

    });

}

　　这里面就是些核心代码了, 我之前有写过js实现瀑布流的demo, 并在此博客中发过, 那么我们就来对比下, 用这两种方法所写的瀑布流吧, 看起来效果是一样的, 但是js写起来确实非常复杂的, 而JQuery写起来却是非常简单的, 所以我个人认为这个还是比较简单的, 当然啦, 思路大体上还是一样的, 最终的选择还是看个人喜好了, 好了各位今天就写到这里了, 至于那个响应式布局在本demo中没有加进去, 如果有兴趣的朋友可以尝试着写下, 当然啦, 写好了欢迎与我一块分享哈, 我们共同学习, 共同进步了, 好了, 要开始其他任务了, 拜拜喽.

jQuery的简单应用的更多相关文章

jquery实现简单瀑布流布局（续）：图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
jquery实现简单瀑布流布局
jquery实现简单瀑布流布局是开头都会说的原理瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
Javascript对象、Jquery扩展简单应用
Javascript对象,表现方式一: person = new Object(); person.firstname = "An"; person.lastname = &quo ...
Jquery实现简单的分页
转,Jquery实现简单的翻页功能 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
jQuery系列第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
jQuery实现简单前端搜索功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
3-5 编程练习：jQuery实现简单的图片对应展示效果
3-5 编程练习:jQuery实现简单的图片对应展示效果通过这个章节的学习, 老师带领大家完成了一个基本的图片切换特效,接下来,我们也实现一个类似的效果,点击相应的按钮,切换对应的图片. 效果图 : ...
PHP+jQuery开发简单的翻牌抽奖实例
PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: <ul ...
使用jQuery做简单的图片轮播效果
一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...
Jquery Ajax简单封装(集中错误、请求loading处理)
Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

随机推荐

在浏览器中打不开Oracle 11gR2的企业管理器页面
最简单的办法,重建EM 四个步骤: emca -repos drop emca -repos create emca -config dbcontrol db emctl start dbconsol ...
mysql 自带全文检索
对于一些简单的检索可以通过mysql自带的全文索引及 MATCH AGAINST 查询语句实现.实验步骤如下.1.建表DROP table IF exists con_video_file_des_t ...
VC++6.0 下配置 pthread库2010年12月12日星期日 13:14VC下的pthread多线程编程转载
VC++6.0 下配置 pthread库2010年12月12日星期日 13:14VC下的pthread多线程编程转载 #include <stdio.h>#include &l ...
你好，C++（16）用表达式表达我们的设计意图——4.1 用操作符对数据进行运算
第4章将语句编织成程序学过C++中的各种数据类型, 就知道如何使用各种数据类型定义变量来描述现实世界中的各种事物了.现在,我们可以将一个工资统计程序大致写成下面这个样子: // 工资统计程序 ...
thinkphp M 和模板用法
<?phpnamespace Home\Controller;use Think\Controller;class IndexController extends Controller { pu ...
JQuery操作下拉框 select
要实现这种效果: html代码 1<script src="js/jquery-1.7.2.min.js"></script> 2 <table> ...
逆天的IE7中，诡异的横向滚动条
今天老邹我又要吐槽IE7了,这个奇葩浏览器总是不让省心.这回遇到的问题,灰常难发现是怎么回事,不过还是让我发现原因,哈哈,只要原因去干掉这个问题比躲避问题用别的办法绕开要爽的多啊. 首先我还是介绍下, ...
discuz 万能SQL查询调用语句写法
首先在最底层source\class\table写入底层安全调用文件例如:table_common_friendlink.php 代码: <?php /** * [Discuz!] (C)200 ...
《python基础教程》笔记之序列通用操作
索引序列中的所有元素都是有编号的--从0开始递增.使用负数索引时,Python会从右边,也就是从最后一个元素开始计数,最后一个元素的位置编号是-1.此外,字符串是一个有字符组成的序列,字符串字面值可 ...
微软SpeechRecognitionEngine
API官网手册:http://msdn.microsoft.com/zh-cn/library/System.Speech.Recognition.SpeechRecognitionEngine(v= ...

jQuery的简单应用

jQuery的简单应用的更多相关文章

随机推荐

热门专题