jQuery实现瀑布流布局

HTML

代码如下:

<div id="main">
         <div class="box">
             <div class="pic">
                 <img src="images/0.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/1.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/2.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/2.jpg" alt="">
             </div>
         </div>
 </div>

CSS

代码如下:

* {
     margin: 0;
     padding: 0;
 }
 #main {
     position: relative;
 }
 .box {
     padding:15px 0 0 15px;
     float:left;
 }
 .pic {
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     box-shadow: 0px 0px 5px #ccc;
     img {
         width:165px;
         height:auto;
     }
 }

JavaScript

代码如下:

$(window).on("load",function () {
     waterfall();
     var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
     //模拟json数据;
     $(window).on("scroll",function () {
         if(checkScrollSlide){
             $.each(dataInt.data,function (key,value) {
                 var oBox=$("<div>").addClass("box").appendTo($("#main"));
                 //jQuery支持连缀,隐式迭代;
                 var oPic=$("<div>").addClass('pic').appendTo($(oBox));
                 $("<img>").attr("src","images/"+$(value).attr("src")).appendTo(oPic);
             });
             waterfall();
         }
     })
 });
 //流式布局主函数;
 function waterfall () {
     var $boxs=$("#main>div");
     //获取#main元素下的直接子元素div.box;
     //获取每一列的宽度;
     var w=$boxs.eq(0).outerWidth();
     //outerWidth()获取包含padding和border在内的宽度;
     //var w=$boxs.eq(0).width();
     //width()只能获取给元素定义的宽度;
     var cols=Math.floor($(window).width()/w);
     //获取多少列;
     $("#main").width(w*cols).css("margin","0 auto");
     //设置#main元素的宽度和居中样式;
     var hArr=[];
     //每一列高度的集合;
     $boxs.each(function (index,value) {
     //遍历每一个box元素;
     //为了找到之前所有元素的最低点,然后将本元素设置到最低点之下;
         var h=$boxs.eq(index).outerHeight();
         //每一个box元素的高,
         if (index<cols) {
             hArr[index]=h;
             //确定每列第一个元素的高度;
         } else{
             var minH=Math.min.apply(null,hArr);
             //得出列高数组中的最小高度;
             var minHIndex=$.inArray(minH,hArr);
             //$.inArray()方法得出元素(minH)在数组(hArr)中的index值;
             //console.log(value);
             //此时的value是第一行之后的所有的box元素的DOM对象!;
             $(value).css({
             //$(value):将DOM对象转换成jQuery对象,才能继续使用jQuery方法;
                 "position":"absolute",
                 "top":minH+"px",
                 "left":minHIndex*w+"px"
             });
             hArr[minHIndex]+=$boxs.eq(index).outerHeight();
             //最低高元素的高度+刚添加到最低高度下的元素的高度=新的列高;
         };
     });
     // console.log(hArr);
 };
 function checkScrollSlide () {
     var $lastBox=$("#main>div").last();
     var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
     var scrollTop=$(window).scrollTop();
     var documentH=$(window).height();
     return (lastBoxDis<scrollTop+documentH)?true:false;
 }

详细解释清仔细参考注释吧,我就不单独再拉出来写了。

(0)

相关推荐

  • jquery实现瀑布流效果分享

    使用jquery实现瀑布流效果,大家参考使用吧,运行后可以看到效果,代码中的JQ引入一定要换成自己的才好 复制代码 代码如下: <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>AJAX</title> <link rel="stylesheet" href="boot

  • jQuery实现瀑布流布局详解(PC和移动端)

    瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上.这种布局图片的样式大概分为三种:等高等宽.等宽不等高.等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例. 我们用百度图片作为范例: 这就是PC端比较常见的瀑布流布局方式,接下来我们审查下元素看看百度图片里面是如何布局: 可以看到,它里面实际是若干个等宽的列容器,通过计算将图片push到不同的容器里.而本文介绍的展示方法是通过定位的方式,虽然最后布局展示的方式不同,但之前的算法都比较类似. 动手 首先我们将如下样

  • Jquery瀑布流插件使用介绍

    瀑布流布局浅析 浅谈个人在瀑布流网页的实现中遇到的问题和解决方法 折腾:瀑布流布局(基于多栏列表流体布局实现) javascript 瀑布流.各大瀑布流简析与建议 因为自己用jquery比较多,便萌生了把瀑布流做成插件的想法,图片就借用迅雷UED上的那些美图吧. 先看看Demo 把代码放出来吧 复制代码 代码如下: ;(function($){ var //参数 setting={ column_width:204,//列宽 column_className:'waterfall_column'

  • jQuery瀑布流插件Wookmark使用实例

    插件下载:https://github.com/GBKS/Wookmark-jQuery官方主页:http://www.wookmark.com/jquery-plugin 下载插件后,在网页中引用插件的JS文件: 复制代码 代码如下: <script src="jquery-1.8.2.min.js"></script><script src="jquery.wookmark.min.js"></script> HT

  • jQuery Masonry瀑布流插件使用详解

    Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用Masonry则垂直排列元素,然后将下一个元素放置到网格中的下一个开发区域.这种效果可以最小化处理 不同高度的元素在垂直方向的间隙.如下: 在上图中大家可以看到,在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大,而使用Masonry处理后,间隔变小. 用法 首先倒入类库,

  • 基于jQuery实现瀑布流页面

    本文实例为大家分享了jQuery实现瀑布流页面展示的具体代码,供大家参考,具体内容如下 views.py from django.shortcuts import render,HttpResponse from app01 import models import json # Create your views here. def index(req): if req.method == 'POST': dic = models.Upload.objects.filter(status=1)

  • jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)

    瀑布流-绝对定位布局,与浮动布局的区别在于 1.布局不一样: 绝对定位:一个UL里面放置所有的绝对定位的LI: 浮动布局:多个(一般三四个)UL分布放置LI: 2.AJAX不一样 绝对定位:只需要将请求来的JSON数据(当然可以是别的格式的数据),插入到UL就可以了.然后再对这个新插入的LI进行TOP和LEFT设置: 浮动布置:是将请求来的JSON数据(当然可以是别的格式的数据),分别插入到对应的UL当中,因为有绝对定位,所以不用对LI设置位置.会自动向下排列: 一.功能分析: 1.定位每一个L

  • jquery简单瀑布流实现原理及ie8下测试代码

    测试环境:ie8 ff13.0.1 chrome22 可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

  • jQuery.lazyload+masonry改良图片瀑布流代码

    实现方法如下:(这里只发jquery了,相关html代码请各位自己脑补一下吧,我就不发了,哈哈) /** * 自动刷新 * @type {*|jQuery|HTMLElement} */ var $container = $('#main'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.item', columnWidth:205, gutterWidth:10, isAnimated:

  • jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)

    浮动布局:即HTML结构的列,是用浮动方式. 一.功能分析: 1.判断图片是否进入可视区域: 2.用AJAX请求服务器数据: 3.将数据播入到相应的列队: 二.实现方法: 给window的scroll事件l绑定一个处理函数:做如下工作: 1.如何判断最后一行的图片,是否进入了可视区域? 如果:最后一行的某个图片距离浏览器可视区域顶部的距离值 小于 (可视区域的高度+滚动条滑动的距离值): 那么:就可以判定这个图片进入了浏览器的可视区域: 2.如何用AJAX请求服务器数据; $.getJSON()

随机推荐