javascript - 移动端商品加载页商品div高度不一致导致错位求解决方案
高洛峰
高洛峰 2017-04-11 11:06:36
[JavaScript讨论组]

大致效果如图所示,一个移动端APP商品页,由于展示商品的产品描述如商品名,价格等不一致,有的商品p多出一行文字导致整个页面错位,请问如何解决这个问题?PS:不加固定高度
第二个问题就是如何只加载当前屏幕下的商品,只有用户继续向下滚动的时候才继续加载

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(3)
黄舟

如果是边框问题,可以试试
*{

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}
如果是下面字体过多导致,建议给下面的文字那块固定一个宽高

PHP中文网

1、你可以尝试使用瀑布流的方式获取当前商品的总高度判断一下

2、你的第二个问题,是现在常见的图片懒加载,你可以自己添加判断条件进行设计

PHPz
  1. 页面错位问题,题主的页面布局主要是由于当一行文字过多时导致,可以用文本截断解决。text-overflow: ellipsis;

  2. 滚动加载图片。也是推荐图片懒加载。具体的做法可以参考这篇文章懒加载图片?不要依赖 JavaScript !。我跟着这边文章学习的懒加载,感觉现在完全理解并能实现了了。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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