瀑布流代码PHP,php 图片瀑布流

1.test.php代码(html js)

瀑布流测试

#wf-main{position: relative;}

#wf-main li{padding: 15px 0 0 15px; float:left;}

for($i=1;$i<=8;$i++) {

$string = './image/test'.$i.'.jpg';

echo "

";

}

?>

$(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 = $("

").addClass("wf-cld").appendTo("#wf-main");

$("").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

}

function getCount(){

var length = $("#wf-main ").find('li').length;

return length;

}

2.action.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

文件目录

结果