ホームページ >バックエンド開発 >PHPチュートリアル >ウォーターフォール フロー php js に関するいくつかの関連問題
ウォーターフォール フロー php js に関するいくつかの関連問題
- WBOYオリジナル
- 2016-06-13 12:45:32920ブラウズ
ウォーターフォール フロー php js に関するいくつかの問題
インターネットからウォーターフォール フローをダウンロードし、長時間作業した後、問題を発見しました。
特に長い列が 1 つか 2 つあります
非常に見苦しいコードを見てみると、jsで位置を決めて新しい内容を入れていることが分かりました。コードは次のとおりです。
$(document).ready(function(){<br />
loadMore();<br />
}); <br />
<br />
$(window).scroll(function(){<br />
// 当滚动到最底部以上100像素时， 加载新内容<br />
<br />
<br />
if ($(document).height() - $(this).scrollTop() - $(this).height()<100 && $(document).height()<5000) loadMore();<br />
<br />
});<br />
<br />
<br />
function loadMore()<br />
{<br />
$.ajax({<br />
url : 'data.php',<br />
dataType : 'json',<br />
success : function(json){<br />
if(!json){<br />
<br />
return;<br />
}else if(typeof json == 'object'){<br />
var oProduct, $row, iHeight, iTempHeight;<br />
for(var i=0, l=json.length; i<l; i++)<br />
{<br />
oProduct = json[i];<br />
<br />
// 找出当前高度最小的列, 新内容添加到该列<br />
iHeight = -1;<br />
$('#stage li').each(function(){<br />
iTempHeight = Number( $(this).height() );<br />
if(iHeight==-1 || iHeight>iTempHeight)<br />
{<br />
iHeight = iTempHeight;<br />
$row = $(this);<br />
}<br />
});<br />
<br />
$(function(){<br />
$(".wf-cld .btn").hide();<br />
$(".wf-cld").hover(function(){<br />
$(".btn",this).show();<br />
},function(){<br />
$(".btn",this).hide();<br />
});<br />
$(".drop").hide();<br />
$(".per").hover(function(){<br />
$(".drop").show();<br />
},function(){<br />
$(".drop").hide();<br />
});<br />
})<br />
<br />
<br />
<br />
<br />
$item = $('<div class="wf-cld"><a href="goods.php?id='+oProduct.name+'" ><img src="/upload/'+oProduct.name+'.'+oProduct.format+'" ></a><div class="btn"><div class="like l"><a class="bj" href="#" >10000</a></div><a href="#" class="share"><img src="/images/y2_16.png"></a><a href="#" class="shoucang"><img src="/images/y2_18.png"></a><a href="#" class="bj">123</a><a href="#" class="bj">诱惑</a><a href="#" class="bj">诱惑</a></div></div>').hide();<br />
<br />
<br />
<br />
$row.append($item);<br />
$item.fadeIn();<br />
}<br />
}<br />
}<br />
});<br />
}<br />
このコードは、新しいコンテンツを挿入する場所を検出します:
// 找出当前高度最小的列, 新内容添加到该列<br />
iHeight = -1;<br />
$('#stage li').each(function(){<br />
iTempHeight = Number( $(this).height() );<br />
if(iHeight==-1 || iHeight>iTempHeight)<br />
{<br />
iHeight = iTempHeight;<br />
$row = $(this);<br />
}<br />
});
そうすると上の画像が表示されるのですが、何か良い方法はありますか？ ? 皆さんありがとうございました！
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。