mysql瀑布流布局插件_php/mysql/jquery实现各系统流行的瀑布流显示方式

瀑布流-Derek for PHP100.com

/*

* Javascript文件：waterfall.js

*/

$(function(){

jsonajax();

});

//这里就要进行计算滚动条当前所在的位置了。如果滚动条离最底部还有100px的时候就要进行调用ajax加载数据

$(window).scroll(function(){

//此方法是在滚动条滚动时发生的函数

// 当滚动到最底部以上100像素时，加载新内容

var $doc_height,$s_top,$now_height;

$doc_height = $(document).height(); //这里是document的整个高度

$s_top = $(this).scrollTop(); //当前滚动条离最顶上多少高度

$now_height = $(this).height(); //这里的this 也是就是window对象

if(($doc_height - $s_top - $now_height) < 100) jsonajax();

});

//做一个ajax方法来请求data.php不断的获取数据

var $num = 0;

function jsonajax(){

$.ajax({

url:'data.php',

type:'POST',

data:"num="+$num++,

dataType:'json',

success:function(json){

if(typeof json == 'object'){

var neirou,$row,iheight,temp_h;

for(var i=0,l=json.length;i

neirou = json[i]; //当前层数据

//找了高度最少的列做添加新内容

iheight = -1;

$("#stage li").each(function(){

//得到当前li的高度

temp_h = Number($(this).height());

if(iheight == -1 || iheight >temp_h){

iheight = temp_h;

$row = $(this); //此时$row是li对象了

}

});

$item = $('

'+neirou.title+'

').hide();

$row.append($item);

$item.fadeIn();

}

}

}

});

}

/*

* CSS文件：waterfall.css

*/

body{text-align:center;}

/*Download by http://www.php100.com*/

#stage{ margin:0 auto; padding:0; width:880px; }

#stage li{ margin:0; padding:0; list-style:none;float:left; width:220px;}

#stage li div{ font-size:12px; padding:10px; color:#999999; text-align:left; }

/*

* php文件：data.php

*/

$link = mysql_connect("localhost","root","");

$sql = "use waterfall";

mysql_query($sql,$link);

$sql = "set names utf8";

mysql_query($sql,$link);

$num = $_POST['num'] *10;

if($_POST['num'] != 0) $num +1;

$sql = "select img,title from content limit ".$num.",10";

$result = mysql_query($sql,$link);

$temp_arr = array();

while($row = mysql_fetch_assoc($result)){

$temp_arr[] = $row;

}

$json_arr = array();

foreach($temp_arr as $k=>$v){

$json_arr[] = (object)$v;

}

//print_r($json_arr);

echo json_encode( $json_arr );