JQuery实现瀑布流

来源：互联网发布：简单的sql查询语句编辑：程序博客网时间：2024/04/26 08:18

HTML

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>瀑布流JQ</title>    <link href="css/index.css" rel="stylesheet"></head><body>    <div id="main">    </div>    <script src="js/jquery-1.12.4.js" type="text/javascript"></script>    <script src="js/index.js" type="text/javascript"></script></body></html>

CSS

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{    margin: 0;    padding: 0;}#main{    position: relative;}.box{    padding:15px 0 0 15px;    float: left;}.pic{    border:1px solid #dddddd;    padding: 10px;    background-color: white;}.pic img{    width: 165px;}

JQuery

var imgArr = [];$(document).on('ready',function () {    for(var i=0; i<=40; i++){        addBox('images/' + i +'.jpg');        imgArr[i]={'img': i+'.jpg'};    }});$(window).on('load', function () {    waterFall();    $(window).on('scroll', function () {        if(cheackWillLoad()){            var data = {'dataImg': imgArr};            $.each(data.dataImg, function (index, value) {                addBox('images/'+ $(value).attr('img'))            });         waterFall();        }     })});function addBox(img) {    var newBox = $('<div>').addClass('box').appendTo($('#main'));    var newPic = $('<div>').addClass('pic').appendTo($(newBox));    $('<img>').attr('src', img).appendTo($(newPic));}function waterFall(){    var allBox = $('#main>.box');    var boxW = $(allBox).eq(0).outerWidth();    var screenW = $(window).width();    var cols = Math.floor(screenW / boxW);    $('#main').css({        'width': cols * boxW + 'px',        'margin': '0 auto'    });    var heightArr = [];    $.each(allBox, function (index, value) {        var boxH = $(value).outerHeight();        if(index < cols){           heightArr[index] = boxH;        }else{           var minBoxH = Math.min.apply(null, heightArr);           var minBoxIndex = $.inArray(minBoxH, heightArr);           $(value).css({               'position': 'absolute',               'top': minBoxH + 'px',               'left': minBoxIndex * boxW + 'px'           });           heightArr[minBoxIndex] += boxH;        }    });}function cheackWillLoad() {    var lastBox = $('#main>.box').last();    var lastBoxDis = $(lastBox).outerHeight() * 0.5 + $(lastBox).offset().top;    var clientH = $(window).height();    var scrollTopH = $(window).scrollTop();    return lastBoxDis <= clientH + scrollTopH;}

0 0