0

0

关于瀑布流的一些问题php+js的

php中文网

php中文网

发布时间:2016-06-23 14:13:09

|

1053人浏览过

|

来源于php中文网

原创

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



会出现 一列或者 两列 特别的长
非常不美观,我看了看代码,是在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="/upload/'+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="/images/y2_16.png" alt="关于瀑布流的一些问题php+js的" ></a><a href="#"  class="shoucang"><img  src="/images/y2_18.png" 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 );?>

这段代码的时候 返回的 是正常的瀑布流,
而我换成从数据库取出来的数据就会出现那种错位的情况:

MVM mall 网上购物系统
MVM mall 网上购物系统

采用 php+mysql 数据库方式运行的强大网上商店系统,执行效率高速度快,支持多语言,模板和代码分离,轻松创建属于自己的个性化用户界面 v3.5更新: 1).进一步静态化了活动商品. 2).提供了一些重要UFT-8转换文件 3).修复了除了网银在线支付其它支付显示错误的问题. 4).修改了LOGO广告管理,增加LOGO链接后主页LOGO路径错误的问题 5).修改了公告无法发布的问题,可能是打压

下载
<?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 头的影响呢?

相关文章

PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

616

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

194

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

91

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

20

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

54

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

29

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

15

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

598

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

56

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号