Some questions about waterfall stream I downloaded the waterfall stream from the Internet in php + js. I found a problem in the past half a day. one column or one column may appear; the two columns & nbsp; are very long and not beautiful. I looked at the code and checked the position in js and put it in the new content. the code is as follows: $ (document ). ready (function () {loadMore ();} some questions about waterfall stream in php + js
I downloaded the waterfall stream from the internet and found a problem after half a day,
One or two columns are particularly long.
I looked at the code and checked the location in js and put it in the new content. the code is as follows:
$ (Document). ready (function (){
LoadMore ();
});
$ (Window). scroll (function (){
// Load the new content when the scroll is over 100 pixels at the bottom.
If ($ (document ). height ()-$ (this ). scrollTop ()-$ (this ). height () <100 & $ (document ). height () <5000) loadMore ();
});
Function loadMore ()
{
$. Ajax ({
Url: 'data. php ',
DataType: 'json ',
Success: function (json ){
If (! Json ){
Return;
} Else if (typeof json = 'object '){
Var oProduct, $ row, iHeight, iTempHeight;
For (var I = 0, l = json. length; I
{
OProduct = json [I];
// Locate the column with the smallest current height and add the new content to the column
IHeight =-1;
$ ('# Stage li'). each (function (){
ITempHeight = Number ($ (this). height ());
If (iHeight =-1 | iHeight> iTempHeight)
{
IHeight = iTempHeight;
$ Row = $ (this );
}
});
$ (Function (){
$ (". Wf-cld. btn"). hide ();
$ (". Wf-cld"). hover (function (){
$ (". Btn", this). show ();
}, Function (){
$ (". Btn", this). hide ();
});
$ (". Drop"). hide ();
$ (". Per"). hover (function (){
$ (". Drop"). show ();
}, Function (){
$ (". Drop"). hide ();
});
})
$ Item = $('10000123 temptation to seduce '). hide ();
$ Row. append ($ item );
$ Item. fadeIn ();
}
}
}
});
}
This code detects where new content is inserted:
// Locate the column with the smallest current height and add the new content to the column
IHeight =-1;
$ ('# Stage li'). each (function (){
ITempHeight = Number ($ (this). height ());
If (iHeight =-1 | iHeight> iTempHeight)
{
IHeight = iTempHeight;
$ Row = $ (this );
}
});
In this case, the above picture will appear. I want to change it to normal. do you have any good solutions ??
Thank you! Share:
------ Solution --------------------
It should be related to your overall layout
You 'd better paste the code for testing
------ Solution --------------------
Should you consider the impact of the BOM header?