案例--不等高瀑布流

最新推荐文章于 2024-10-28 20:20:50 发布

原创

最新推荐文章于 2024-10-28 20:20:50 发布 · 557 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

不等高瀑布流,ul不能设置高度,高度靠每个ul内的li撑开,

ul 不能用 flex 布局,因为会固定其他 ul 的高度,

所以只能用 float: left,浮动只针对当前 ul

代理测试

/*
  瀑布流
    + 请求地址:
      => https://www.duitang.com/napi/blog/list/by_filter_id/?
        include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&
        filter_id=美食菜谱&
        start=24&
        _=1627261229774
*/

// 测试请求 - 没有问题
const obj = {
  include_fields: 'top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count',
  filter_id: '美食菜谱',
  start: 0,
  _: new Date().getTime()
}

pAjax({
  url: '/dt',
  data: querystringify(obj),
  dataType: 'json'
}).then(res => {
  console.log(res)
})

JS

// 瀑布流的逻辑代码
/*
  一个小问题
    + 第一次加载的时候, img 是没有缓存的
    + 我的图片是需要去进行加载的
    + 但是, 一定是 页面结构 先到了页面上
    + 然后在开始加载图片
    + 当 li 进入到页面的时候, img 的图片还没有加载
    + 就导致一个问题, img 标签没有高, 那么所有的 li 一边高
    + 当你的 图片 加载好以后, 就导致格式不合适了

  如何解决
    + 不管你的图片是不是加载了, 都给你设置好 高度
    + 把本章图片的位置先占上, 将来加载图片就不会改变 li 的高度了
    图片真实宽度     页面设计宽度
    ----------  =  -----------
    图片真实高度     页面设计高度