php 图片瀑布流

1.test.php代码（html js）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>瀑布流测试</title>
    <style type='text/css'>
        #wf-main{position: relative;}
        #wf-main li{padding: 15px 0 0 15px; float:left;}
    </style>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
</head>
<body>
<ul class="tips" id="wf-main" style="list-style-type:none;">
    <?php
    for($i=1;$i<=8;$i++) {
        $string = './image/test'.$i.'.jpg';
        echo "<li class='wf-cld'><img src='$string'  width='200' height='auto' alt='' /></li>";
        }
    ?>
</ul>
</body>
</html>
<script>
    $(function(){
        waterfall();
        //进行加载图片
        var count = getCount();
           $('#wf-main').on('scroll',function(){
            if(checkscrollside()){
//                var offset = $("input[name=offset]").val();
//                var length = $("input[name=length]").val();
//                var justice = $("input[name=justic]").val();
//                if(justice === offset){
//                    return false;
//                }else{
//                    $("input[name=justic]").val(offset);
//                }
                //ajax 提交到action.php
                $.ajax({
                    type: 'POST',
                    url: "action.php" ,
                    data: {id:count},
                    success: function(dat) {
//                        var data = eval('('+dat +')');
                        var data = JSON.parse(dat);
                        console.log(data);
                        if(data){
                            $(data).each(function(id,status,url){
                                $li =  $("<li>").addClass("wf-cld").appendTo("#wf-main");
                                $("<img>").attr({"src":this.url}).css({"width":"200px","height":"auto"}).appendTo($li);
                            });
                            //确保滚动条高度保持不变
                            var scroll_top  = $(window).scrollTop();
                            waterfall();
                            $(window).scrollTop(scroll_top);
                        }
                    }
                });

            }
        });

    });
    //让图片折叠排列
    function waterfall(){
        var $par_main = $("#wf-main"); //父元素
        var $child_main = $("#wf-main>li"); //子元素
        var par_width = $par_main.width(); //获得父元素的宽度

        var child_width = $child_main.eq(0).width(); //获得子元素宽度
        var num_col     = Math.floor(par_width / child_width); //一行显示多少列

        var col_arr = []; //一列中所有元素相加后的高度 做多有num_col 个值
        col_arr.length=0;
        $child_main.each(function(index,value){
            if(index < num_col){
                col_arr[index] = $(value).height();
            }else{
                var minH = Math.min.apply( null, col_arr );//数组pinHArr中的最小值minH
                var min_index =  $.inArray(minH,col_arr); //获得最小索引值
                //数组中最小元素的高 +  新块的高 + 15 空格距离
                col_arr[min_index] += $child_main.eq(index).height() + 15;

                $(value).css({  //设置元素显示位置
                    position:"absolute",
                    top:minH + 15 ,
                    left : $child_main.eq(min_index).position().left
                });
                var maxH = Math.max.apply(null,col_arr);
                $par_main.height(maxH); // 更改父元素高度
            }
        });
    }
    //是否进行夹杂滚动条 当最后一张图片顶部 到 最后一张图片自身高度的一半作为分界线
    function checkscrollside(){
        var  $child_main =  $("#wf-main>li");
        var trigger_heigth = $child_main.last().get(0).offsetTop + $child_main.height() / 2;
        //滚动条高度
        var scroll_top = $(window).scrollTop();
        //获取页面宽度
        var docu_width = $(document).width();
        return (trigger_heigth <scroll_top + docu_width)?true:false;
    }

    function getCount(){
        var length = $("#wf-main ").find('li').length;
        return length;
    }

</script>

2.action.php php代码

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2017/7/11
 * Time: 14:49
 */

   // $postId = $_POST['id'];
    $postId = 5;
    $coon = mysql_connect('172.28.32.205','root','123456');
    if(!$coon) {
        die('connect failed');
    }
    mysql_select_db('test',$coon);
    mysql_set_charset('utf-8',$coon);
    $query = "select * from test_image where status=1 and id > ".$postId." limit 5;";

    $re = mysql_query($query);
    while($arr = mysql_fetch_assoc($re)) {
        $arry [] = $arr;
    }
    exit(json_encode($arry));//这里一定要写成exit 之前写成return 一直报错，ajax远程调程序，得到数据。要停止程序并返回到ajax

文件目录
php 图片瀑布流

结果
php 图片瀑布流

php 图片瀑布流

相关推荐