首页 > 代码库 > jQuery简单实现瀑布流布局

jQuery简单实现瀑布流布局

实现原理很简单

一、算出每行最多存放多少张图片,赋值给最外层盒子的宽度

二、图片采用绝对定位,通过js来改变top值,当前页面的图片直接在html中设置完毕

三、创建一个数组存放当前所有图片top值,找到最小top值从而确定下一行第一章图片位置,以此类推...

四、触发scroll事件时重新渲染页面

 

这里图片事先准备好,也可以http跨域请求数据~

 

下面是代码部分

 

css样式:

            body,div,img{margin:0;padding:0;}
            #main{
                margin:0 auto;
                position:relative;
            }
            #main .wrap{
                padding:10px 0 0 10px;
                position:absolute;
            }
            #main .box{
                border:1px solid #666;
                border-radius:4px;
                width:250px;
                padding:5px;
            }
            #main .box img{
                width:250px;
            }

 

html结构:

<div id="main">
            <div class="wrap">
                <div class="box">
                    <img src="images/1.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/2.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/3.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/4.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/5.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/6.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/7.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/8.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/9.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/10.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/11.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/12.jpg">
                </div>
            </div>
        </div>

 

js代码:

        //页面加载完毕渲染
        window.onload = function(){
            waterFall("#main",".wrap");
        };
      window.onscroll
= function(){
      //储存图片
var arrImg = [ "images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg", "images/7.jpg", "images/8.jpg", "images/9.jpg", "images/10.jpg", "images/11.jpg", "images/12.jpg" ]; for(var i=0;i<arrImg.length;i++){ $("#main").append($("<div class=‘wrap‘><div class=‘box‘><img src="http://www.mamicode.com/+arrImg[i]+"></div></div>")); } waterFall("#main",".wrap"); } //适应不同尺寸窗口大小 /* @param1 最外层父级元素id @param2 图片父级元素类名 */ function waterFall(Id,className){ var jqId = $(Id), jqClass = $(className), pageW = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth, //当前窗口宽度 colNum = Math.floor(pageW/jqClass.innerWidth()), //每行列数 mainW = colNum*(jqClass.innerWidth()); //每行总宽度 jqId.css("width",mainW); //设置top值 var arrT = []; jqClass.each(function(e){ if(e<colNum){ jqClass.eq(e).css("left",jqClass.innerWidth()*e); arrT.push(jqClass.eq(e).innerHeight()); }else{ var minH = Math.min.apply(null,arrT), //获取当前数组最小值及对应索引值 index = arrT.indexOf(minH), minL = jqClass.eq(index).css("left"); jqClass.eq(e).css({ "top":minH, "left":minL, }); arrT[index] = minH + jqClass.eq(e).innerHeight(); } }) };

 

jQuery简单实现瀑布流布局