关于项目中的瀑布流布局...

近年来,瀑布流布局的网站非常流行.

关于瀑布流,我的理解是:参差不齐,却不失美感的图片盛宴!

关于程序设计:给人印象就深刻的就是拉动滚动条快到底部的时候,下面又冒出来一堆图片,直到没有图片,滚动条不能拉动.

                  数据来源,Ajax异步请求问服务器要json数据(服务器也可以把所有数据返回给前段,一个二维数组(json和数组用法,只是格式不一样),滚动条拉到快底部,取json的键,再把对应键里面的值,也就是图片便利出来,前者用的比较多,这里重点说前者Ajax问服务器要数据)

先准备后台页面data.php

<?php
//Ajax请求的时候,带的页数page,即为数组的键0,1,2,3所有对应的值,总页数是已知的
if(isset($_GET['page'])&&$_GET['page']<4){
$a=array (
  0 => 
  array (
    0 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/12109020698951116/T1840AXCpfXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    1 => 
    array (
      'pic_url' => 'http://img04.taobaocdn.com/bao/uploaded/i4/T1_bTyXjBhXXcnKa32_043205.jpg_b.jpg',
    ),
    2 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i3/19373021902175629/T1HaFyXwXcXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    3 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/17434020462585894/T1KKJKXCVdXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    4 => 
    array (
      'pic_url' => 'http://img01.taobaocdn.com/bao/uploaded/i1/T1nn.dXfNeXXbrKu.V_020406.jpg_b.jpg',
    ),
    5 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/10176023070691763/T1KSR0XpNbXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    6 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/14303020297299143/T1iulCXrVeXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    7 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i3/13754020261767042/T1hv4EXDVeXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    8 => 
    array (
      'pic_url' => 'http://img02.taobaocdn.com/bao/uploaded/i2/T1XPPIXb4nXXXT_mba_121932.jpg_b.jpg',
    ),
    9 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/15051033796368437/T1wgRyXxNfXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    10 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/10324022036487840/T1DUBBXpdcXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    11 => 
    array (
      'pic_url' => 'http://img04.taobaocdn.com/bao/uploaded/i4/T10qzMXh4nXXXHY6Q8_071237.jpg_b.jpg',
    ),
  ),
  1 => 
  array (
    0 => 
    array (
      'pic_url' => 'http://img01.taobaocdn.com/bao/uploaded/i1/T1UY_EXfBpXXbZKBA2_044836.jpg_b.jpg',
    ),
    1 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/19027021598011625/T1_CpoXDhdXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    2 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/15261019999372765/T17FXzXwVbXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    3 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/17033020099207172/T19DBBXE4aXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    4 => 
    array (
      'pic_url' => 'http://img02.taobaocdn.com/bao/uploaded/i2/T1DuYAXndhXXcndeM._111812.jpg_b.jpg',
    ),
    5 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/13232022900847961/T11lpHXrNhXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    6 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/18061020128392914/T1MyVCXvXbXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    7 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/11950021111107294/T18JF0XydcXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    8 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/14748022186051751/T1cnXEXD4cXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    9 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/12582021116055055/T1U8R0XCNbXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    10 => 
    array (
      'pic_url' => 'http://img01.taobaocdn.com/bao/uploaded/i1/T1lBDEXgVnXXcrbO7Y_030056.jpg_b.jpg',
    ),
    11 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/10856023033671767/T1DhFPXwteXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
),
 2 => 
  array (
    0 => 
    array (
      'pic_url' => 'http://img01.taobaocdn.com/bao/uploaded/i1/T1UY_EXfBpXXbZKBA2_044836.jpg_b.jpg',
    ),
    1 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/19027021598011625/T1_CpoXDhdXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    2 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/15261019999372765/T17FXzXwVbXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    3 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/17033020099207172/T19DBBXE4aXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    4 => 
    array (
      'pic_url' => 'http://img02.taobaocdn.com/bao/uploaded/i2/T1DuYAXndhXXcndeM._111812.jpg_b.jpg',
    ),
    5 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/13232022900847961/T11lpHXrNhXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    6 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/18061020128392914/T1MyVCXvXbXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    7 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/11950021111107294/T18JF0XydcXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    8 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/14748022186051751/T1cnXEXD4cXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    9 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/12582021116055055/T1U8R0XCNbXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    10 => 
    array (
      'pic_url' => 'http://img01.taobaocdn.com/bao/uploaded/i1/T1lBDEXgVnXXcrbO7Y_030056.jpg_b.jpg',
    ),
    11 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/10856023033671767/T1DhFPXwteXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
),
    3 => 
  array (
    0 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/15884021160673115/T1Xn01XBBbXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    1 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i1/14207033836280094/T1QCVZXwBXXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    2 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i3/16384021155753422/T1ZHp1XB8dXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    3 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i1/17434033913468404/T1QMJ2XplXXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    4 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/17795020969710297/T13S4SXzlbXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    5 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/19665021151887498/T1Utt0XCheXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    6 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/18212022818523837/T127hSXylcXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    7 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/14600020364207376/T1OC4GXpXgXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    8 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i2/15056033959660208/T15qNOXAFdXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
    9 => 
    array (
      'pic_url' => 'http://img02.taobaocdn.com/bao/uploaded/i2/T147fMXlRgXXc4wqYb_092829.jpg_b.jpg',
    ),
    10 => 
    array (
      'pic_url' => 'http://img02.taobaocdn.com/bao/uploaded/i2/T1QGSlXkXGXXb3koIV_021916.jpg_b.jpg',
    ),
    11 => 
    array (
      'pic_url' => 'http://img.taobaocdn.com/bao/uploaded/i4/15026022755739917/T19oxSXpRXXXXXXXXX_!!0-item_pic.jpg_b.jpg',
    ),
  )
);
echo json_encode($a[$_GET['page']]);
}

js文件

    var page=0;
    var is_loading=true;
    $(document).ready(function(){
        loadMore();//页面第一次加载的时候即向服务器请求数据
    });
    
    //滚动条事件
    $(window).scroll(function(){
        //当滚动条距离底部小于200的时候
        if ($(document).height()-$(this).scrollTop()-$(this).height()<200) {
            //page是服务器数据总共有多少页(是已知的)如果小于10页并且加载完毕,就继续请求服务器
            if (page<4&&is_loading==true) {
                loadMore();
            }
        }
    });
    function loadMore(){
        is_loading=false;
        //页面第一次加载时候,不显示"正在加载中..."提示
        if(page>0){
            $('#is_loading').show();
        }
        $.getJSON('bky.php?page='+page,function(data){
            for(i in data){
                //瀑布流重点就是图片的高度:如果不知道图片的高,只能根据图片的宽,随机出高并保证图片不能失真
                //如果知道图片的宽和高那就好办多了
                var sj_height=parseInt(Math.random()*(319-271)+270);
                var pic=data[i].pic_url;
                var new_pic=pic.substr(0,pic.lastIndexOf('_'))+'_290x10000.jpg';
                //将for in 便利出来的图片依次插入<li></li>标签里面
                if(i%2==0){
                    $('#stage li').eq(0).append("<div><img src='"+new_pic+"' width='290' height='"+sj_height+"'/></div>");
                }else{
                    $('#stage li').eq(1).append("<div><img src='"+new_pic+"' width='290' height='"+sj_height+"'/></div>");
                }
            }
            //加载完成后,页数累计+1,隐藏提示:由于数据有限,提示效果,不明显
            page++;
            $('#is_loading').hide();
            is_loading=true;
    });
}

html,页面

<!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
            <title>test.html</title>
            <style type="text/css">
                body,div,ul,li{margin:0px;padding:0px;}
                #picList{width:640px;height:960px;border:1px solid black;}
                #stage{ margin:0px;padding:0; width:640px;}
                #stage li{ margin:0;list-style:none;float:left;}
                #stage li div{ padding:4px; color:#999999;} 
            </style>
            <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script>
            <script type="text/javascript" src="water.js"></script>
        </head>
        <body>
            <div id="picList">
                <ul id="stage">
                    <li></li>
                    <li></li>
                </ul> 
                <div id="is_loading" style="display:none;position:fixed;bottom:0px;top:auto;font-size:2em;color:gray;">正在加载中...</div>
            </div>
        </body>    
    </html>