fix：处理因浮点数经度问题，导致列数计算错误的问题

Mr-xue commented 2 months ago

因之前在项目中使用时遇到了此问题：https://github.com/heikaimu/vue3-waterfall-plugin/issues/64 一时没找到原因，自己fork源码测试了一下，顺便调整了一下。

测试过程如下：

// 测试配置
const options = reactive({
    rowKey: 'id',
    gutter: 10,
    hasAroundGutter: false,
    breakpoints: {
        1200: {
        rowPerView: 4,
        },
        800: {
        rowPerView: 3,
        },
        500: {
        rowPerView: 2,
        },
    },
    // 是否懒加载
    lazyload: false,
    align: 'center',
})

复现问题时，容器宽度为762，根据公式计，计算完单列宽度为 247.33333333333334。然后在useCalculateCols.ts中计算列数的时候出现问题。

// 列数计算公式：
  const cols = computed(() => {
    const offset = props.hasAroundGutter ? -props.gutter : props.gutter
    return Math.round((wrapperWidth.value + offset) / (colWidth.value + props.gutter))
  })

我的gutter为10，247.33333333333334 + 10 = 257.33333333333337; 后边小数经度丢失导致值发生变化，最后一位由4变成了7;

预期结果为： (762 + 10) / (257.33333333333334) = 3 意外结果为：(762 + 10) / (257.33333333333337) = 2.9999999999999996; 最后再下取舍一下，变成了2列。

这地方改成Math.round()应该就没啥问题了，感觉没必要引入big.js或者decimal.js去处理经度问题。

netlify[bot] commented 2 months ago

Deploy Preview for vue3-waterfall-new failed.

Name	Link
Latest commit	d19bdbf7de5d2f26b1a192878c78a924a28686df
Latest deploy log	https://app.netlify.com/sites/vue3-waterfall-new/deploys/666fe3097fdf160008be8a31

heikaimu commented 2 weeks ago

最近才发现，你这样改会导致PC端导致左右两侧卡片换行出现问题，应该只能针对断点的情况做处理

heikaimu / vue3-waterfall-plugin