搜索
首页后端开发php教程关于瀑布流的一些问题php+js的

我从网上下载的瀑布流,弄了半天发现有个问题,



会出现 一列或者 两列 特别的长
非常不美观,我看了看代码,是在js里面判断位置并放进去新的内容的,代码如下:

$(document).ready(function(){	loadMore();});	$(window).scroll(function(){	// 当滚动到最底部以上100像素时, 加载新内容			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<l; i++)				{					oProduct = json[i];										// 找出当前高度最小的列, 新内容添加到该列					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 = $('<div class="wf-cld"><a href="goods.php?id='+oProduct.name+'" ><img  src="/static/imghwm/default1.png"  data-src="/upload/'+oProduct.name+'.'+oProduct.format+'"  class="lazy"  +oProduct.name+'.'+oProduct.format+'"  alt="关于瀑布流的一些问题php+js的" ></a><div class="btn"><div class="like l"><a class="bj" href="#" >10000</a></div><a href="#"  class="share"><img  src="/static/imghwm/default1.png"  data-src="/images/y2_16.png"  class="lazy"   alt="关于瀑布流的一些问题php+js的" ></a><a href="#"  class="shoucang"><img  src="/static/imghwm/default1.png"  data-src="/images/y2_18.png"  class="lazy"   alt="关于瀑布流的一些问题php+js的" ></a><a href="#"  class="bj">123</a><a href="#"  class="bj">诱惑</a><a href="#"  class="bj">诱惑</a></div></div>').hide();																				$row.append($item);					$item.fadeIn();				}			}		}	});}


其中这段代码是检测在哪里插入新内容的:
// 找出当前高度最小的列, 新内容添加到该列					iHeight = -1;					$('#stage li').each(function(){						iTempHeight = Number( $(this).height() );						if(iHeight==-1 || iHeight>iTempHeight)						{							iHeight = iTempHeight;							$row = $(this);						}					});

这样就会出现上述图片的情况,我想修改成正常的,各位有没有什么好的方法呢??
谢谢大家 啊!


回复讨论(解决方案)

应该与你的整体布局有关
你最好贴出可供测试的代码

应该与你的整体布局有关
你最好贴出可供测试的代码
您帮忙看一下吧 

<?php// 实际应用中 data 一般从数据库读取// Download by http://www.codefans.net$data = array();$data[] = (object)array('image'=>'images/1.jpg',  'title'=>'可爱与性感集于一身 来自韩国的荷叶边复古连衣裙');$data[] = (object)array('image'=>'images/2.jpg',  'title'=>'关爱自己body的同时,千万不要忘记一些小细节,要想让别人爱你,首先先要爱自己。@日本LC品爱 一直是为女生专用护理设计出的牌子,迦沐弹力泡沫是我之前推荐过的迦沐草本皂的升级版,美白效果更明显,泡沫更丰富,能更全面的呵护身体。当然所谓的body也有指“私处”哦。');$data[] = (object)array('image'=>'images/3.jpg',  'title'=>'只为那一抹清新的绿');$data[] = (object)array('image'=>'images/4.jpg',  'title'=>'穿好人人都变小细腿儿');$data[] = (object)array('image'=>'images/5.jpg',  'title'=>'性感蕾丝');$data[] = (object)array('image'=>'images/6.jpg',  'title'=>'贴身舒适,超级有型。');$data[] = (object)array('image'=>'images/7.jpg',  'title'=>'我和益若翼~~买过她家假睫毛的请举手');$data[] = (object)array('image'=>'images/8.jpg',  'title'=>'头发留那么长实属不易,“养”了那么长时间也有感情,但又会对杂志上的QUEEN B QUEEN S的发型馋涎欲滴,我还没有潇洒到减去一头长发,但也会尝试改变下自己,在买的2款假发,一个是发片让头发秘密增多的好武器,一个是梨花头带好立刻变身乖乖女。@花部屋旗舰店');$data[] = (object)array('image'=>'images/9.jpg',  'title'=>'大头不适合带帽子,我去ZARA/HM买帽子都要带男士的L号的算囊意思, 鞋子是@STACCATO 的 今年就收了她家2双鞋子一双是E嫂设计的靴子一双是毛毛高跟,春天快到了,我要HOT PINK!!!!');$data[] = (object)array('image'=>'images/10.jpg', 'title'=>'这是在I-DOU收的小西装一件,非常淑女气质,而且很适合OL MM哦,他们网站最近出了很多新款,都是欧美风的,喜欢的看看,不怕撞衫哦。');$data[] = (object)array('image'=>'images/11.jpg', 'title'=>'自从看了gossip girl后就对这支帅哥美女都用的润唇膏感兴趣,所以一下子收了全部的味道,这是今年最爱的润唇膏,没有之一!打开后就像剥了壳的鸡蛋般润滑,涂在嘴唇上也立刻润色了嘴唇,含维他命而且涂了后一天也不会干,还有防晒指数15哦');$data[] = (object)array('image'=>'images/12.jpg', 'title'=>'百搭的打底衫,其实是长款哦,但是我配高腰裤穿啦,另外超级便宜诶~~~店主MM搭配的也很好看,大家看下吧');$data[] = (object)array('image'=>'images/13.jpg', 'title'=>'偶尔瞥了一眼VIVI杂志结果就爱上了这个款式,口袋的毛毛是貉子毛领,摸上去超级柔软啊,冬天很想把脸捂在里面衣服的款式怎么说呢?erm...偏海军风一点啦 所以从阿眯头这里过去的有团购价哦,只要报暗号“阿眯头”就可以享受,有毛领的399,没有毛领的280');$data[] = (object)array('image'=>'images/14.jpg', 'title'=>'金盏花药膏,这个要特别推荐的原因是,我只要发了痘痘涂好之后第二天痘痘就会变得超级小,第三天就消失了因为我本身不是长痘痘的皮肤,我长痘痘通常都是,通宵了啊,熬夜啦,吃辣吃太多啦,或者月经要来之前才会这样所以长出的痘痘都是有毒性的……摸上去非常疼的那种。');$data[] = (object)array('image'=>'images/15.jpg', 'title'=>'当时在淘宝上买的时候和另一款去黑眼圈的产品纠结了很久,因为另外一款只要48元,作用也是去黑眼圈+补水,后来仔细看了下成分,一个多了绿茶芦荟,绿茶是很好的抗氧化产品,对排毒啊,消黑眼圈的效果很大的老人不是常说天天喝杯绿茶有助于延缓衰老么,对保护心血管也是有很大的作用。');$data[] = (object)array('image'=>'images/16.jpg', 'title'=>'自然增高的坡跟靴,让小腿的线条好美丽。');$data[] = (object)array('image'=>'images/17.jpg', 'title'=>'堂主家的衣服,很喜欢这种帅气的双排扣大衣,版型什么的都很挺括,穿着也显瘦不会冷,冬天就应该有一件这样帅气不失温调的大衣啊 >_<');$data[] = (object)array('image'=>'images/18.jpg', 'title'=>'还是没有忘记敷面膜,这次推荐的大家肯定喜欢,备受好评的 台湾很多明星推荐来的,我很谨慎的只买了一小包,2礼拜不到就用完了。听我的,好用到一包不够的哦。店家正在搞双12活动,大家可以去看看。');$data[] = (object)array('image'=>'images/19.jpg', 'title'=>'翻出前阵子大广角镜头翻出的照片 腿肿么能拉的那么长 朋友推荐我去参加评选 就拿这张去报名吧,每周送出HTC CHACHA 手机一台');$data[] = (object)array('image'=>'images/20.jpg', 'title'=>'看上去不起眼儿的T型罐子,一开始body silk深深的吸引了我,非常2B的把SLIK看成了MILK,心想牛奶涂身体上肯定滋润,但是silk比milk还要强大其实,身体如丝绸般滋润有木有。');// 随机抽取9条记录以模拟实际情况$keys = array_rand($data, 10);$json = array();foreach($keys as $key){	$json[] = $data[$key];}echo json_encode( $json );?>

这段代码的时候 返回的 是正常的瀑布流,
而我换成从数据库取出来的数据就会出现那种错位的情况:
<?phpsession_start();// 实际应用中 data 一般从数据库读取// Download by http://www.codefans.net	$conn=mysql_connect("localhost","root","1989525") or die(mysql_error());	if (!$conn) {		echo "连接失败";	}	mysql_query("set names utf8");	mysql_select_db("xym",$conn);if(! isset($_SESSION['last'])) $_SESSION['last'] = 0;$last = $_SESSION['last']; $sql="select * from xym_pic limit $last,9";$res=mysql_query($sql,$conn);$data = array();while ($row=mysql_fetch_assoc($res)){	  	$data[]=(object)$row;}if(empty($data)){session_destroy();exit();}$_SESSION['last'] += count($data);echo json_encode( $data );?>


返回的json结果是完全一样的!!
因为数据库在本地测试的,您能留下QQ,我发给您让您帮忙看一下行吗?

那你是否应该考虑是否 BOM 头的影响呢?

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
在Laravel中使用Flash会话数据在Laravel中使用Flash会话数据Mar 12, 2025 pm 05:08 PM

Laravel使用其直观的闪存方法简化了处理临时会话数据。这非常适合在您的应用程序中显示简短的消息,警报或通知。 默认情况下,数据仅针对后续请求: $请求 -

PHP记录:PHP日志分析的最佳实践PHP记录:PHP日志分析的最佳实践Mar 10, 2025 pm 02:32 PM

PHP日志记录对于监视和调试Web应用程序以及捕获关键事件,错误和运行时行为至关重要。它为系统性能提供了宝贵的见解,有助于识别问题并支持更快的故障排除

php中的卷曲:如何在REST API中使用PHP卷曲扩展php中的卷曲:如何在REST API中使用PHP卷曲扩展Mar 14, 2025 am 11:42 AM

PHP客户端URL(curl)扩展是开发人员的强大工具,可以与远程服务器和REST API无缝交互。通过利用Libcurl(备受尊敬的多协议文件传输库),PHP curl促进了有效的执行

简化的HTTP响应在Laravel测试中模拟了简化的HTTP响应在Laravel测试中模拟了Mar 12, 2025 pm 05:09 PM

Laravel 提供简洁的 HTTP 响应模拟语法,简化了 HTTP 交互测试。这种方法显着减少了代码冗余,同时使您的测试模拟更直观。 基本实现提供了多种响应类型快捷方式: use Illuminate\Support\Facades\Http; Http::fake([ 'google.com' => 'Hello World', 'github.com' => ['foo' => 'bar'], 'forge.laravel.com' =>

在Codecanyon上的12个最佳PHP聊天脚本在Codecanyon上的12个最佳PHP聊天脚本Mar 13, 2025 pm 12:08 PM

您是否想为客户最紧迫的问题提供实时的即时解决方案? 实时聊天使您可以与客户进行实时对话,并立即解决他们的问题。它允许您为您的自定义提供更快的服务

解释PHP中晚期静态结合的概念。解释PHP中晚期静态结合的概念。Mar 21, 2025 pm 01:33 PM

文章讨论了PHP 5.3中引入的PHP中的晚期静态结合(LSB),从而允许静态方法的运行时分辨率调用以获得更灵活的继承。 LSB的实用应用和潜在的触摸

自定义/扩展框架:如何添加自定义功能。自定义/扩展框架:如何添加自定义功能。Mar 28, 2025 pm 05:12 PM

本文讨论了将自定义功能添加到框架上,专注于理解体系结构,识别扩展点以及集成和调试的最佳实践。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器