瀑布流代码PHP,前后端交互的瀑布流的实现方法（php+jquery+ajax）

瀑布流获取php后台数据

*{ margin:0; padding:0;}

#wrap{

width:837px;

margin:50px auto;

box-shadow:0 0 5px #000;

}

#wrap ul{

overflow:hidden;

}

#wrap ul li{

list-style:none;

width:265px;

float:left;

}

#wrap ul li .detail{

font-family:'Microsoft yahei';

border:1px solid #ddd;

margin-bottom:20px;

display:none;

}

#wrap ul li .detail img{

display:block;

}

#wrap ul li a.dec{

line-height:25px;

padding:8px 15px;

background:#fff;

display:block;

color:#000;

text-decoration:none;

}

#wrap ul li .time{

height:42px;

background:#f1f1f1;

border-top:1px solid #ddd;

}

#wrap ul li .time p{

float:left;

line-height:42px;

color:#666;

text-indent:10px;

font-size:12px;

}

#wrap ul li .time a{

float:right;

width:80px;

line-height:42px;

text-align:center;

color:#666;

font-size:12px;

text-decoration:none;

border-left:1px solid #ddd;

}

#wrap ul li a:hover{

color:#b70032;

}

$(function(){

var $li = $('#wrap ul li');

var liLength = $li.length;

var $wrap = $('#wrap');

var index = -1;

var imgData;

show( 10 );

$(window).scroll(function(){

var bW = $wrap.offset().top + $wrap.height() - $(document).scrollTop();

if ( bW < $(window).height() )

{

num = index + 5;

show( num );

}

});

function show( num ){

$.ajax({

url : 'data.php',

success : function(data){

//转换字符串

imgData = eval(data);

index ++;

var oDiv = createDiv(index);

var i = getShort();

$li.eq(i).append( $(oDiv) );

$(oDiv).fadeIn( 1000 );

var oImg = oDiv.getElementsByTagName('img')[0];

//图片加载完了之后在添加新的图片

oImg.onload = function(){

if ( index < num )

{

show( num );

}

}

}

});

};

//得到三个li最短的那个的序列号

function getShort(){

//假设最短的是第一个；a -> 序列号 ; fH -> 第一个的高度

var a = 0;

var fH = $li.eq(0).height();

//循环所有的li

for ( var i=1;i

{

//得到对应的li的高度

var nH = $li.eq(i).height();

//如果说该li的高度小于fH;

if ( nH < fH  )

{

a = i; // 更新最短的序列号

fH = nH; // 更新最短的高度

}

}

return a;

}

function createDiv(i){

var oDiv = document.createElement('div');

oDiv.className = 'detail';

var oImg = new Image();

oImg.src = imgData[i].src;

oImg.width = '263';

var oA = document.createElement('a');

oA.href = '';

oA.className = 'dec';

oA.innerHTML = imgData[i].dec;

var oDiv1 = document.createElement('div');

oDiv1.className = 'time';

var oP = document.createElement('p');

oP.innerHTML = imgData[i].time;

var oA1 = document.createElement('a');

oA1.href = '';

oA1.innerHTML = '阅读全文';

oDiv1.appendChild(oP);

oDiv1.appendChild(oA1);

oDiv.appendChild( oImg );

oDiv.appendChild( oA );

oDiv.appendChild( oDiv1 );

return oDiv;

}

});