Some questions about waterfall flow Php+js

Source: Internet
Author: User
Some questions about waterfall flow Php+js
I downloaded the waterfall stream from the internet, got a long day to find a problem,



There will be one column or two columns of special length
Very not beautiful, I looked at the code, is in the JS inside to determine the location and put in the new content, the code is as follows:
$ (document). Ready (function () {
Loadmore ();
});

$ (window). Scroll (function () {
Load new content when scrolling to the bottom 100 pixels


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];

Find the column with the lowest current height, and add 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 Temptation '). Hide ();



$row. Append ($item);
$item. FadeIn ();
}
}
}
});
}


Where this code is to detect where new content is inserted:
Find the column with the lowest current height, and add new content to the column
Iheight =-1;
$ (' #stage Li '). each (function () {
Itempheight = number (this). Height ());
if (Iheight==-1 | | iheight>itempheight)
{
Iheight = Itempheight;
$row = $ (this);
}
});

This will appear above the picture of the situation, I would like to change to normal, do you have any good method??
Thank you, everyone!

Share to:


------Solution--------------------
Should be related to your overall layout.
You'd better put out the code to test
------Solution--------------------
Then should you consider whether the impact of the BOM head?
  • Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.