indexDB 与 瀑布流
在前端地图应用中，选择使用IndexedDB而不是LocalStorage来存储数据的原因？
在前端地图应用中，选择使用IndexedDB而不是LocalStorage来存储数据，主要是因为两者在存储能力和使用场景上存在一些显著的差异：
存储容量：LocalStorage的存储容量通常限制在5MB左右，而IndexedDB没有这样的限制，可以存储大量的结构化数据。对于地图应用来说，可能需要存储大量的地理信息、用户位置数据等，这些数据量通常远超LocalStorage的限制 。
数据结构和查询能力：IndexedDB是一种非关系型数据库，它支持更复杂的数据结构和查询能力。你可以在IndexedDB中创建对象存储（object store）和索引（index），这使得对于大量数据的读写和查询变得更加高效。而LocalStorage仅支持简单的键值对存储，没有索引，查询效率较低 。
异步操作：IndexedDB的操作是基于事件和异步的，这意味着它不会阻塞用户界面，即使进行大量数据处理，用户仍然可以进行其他操作。相比之下，LocalStorage的操作是同步的，如果进行大量数据操作，可能会导致用户界面卡顿 。
事务支持：IndexedDB支持事务，这意味着一系列操作可以作为一个整体执行，如果其中任何操作失败，整个事务可以回滚，保证数据的一致性。而LocalStorage不支持事务，一旦写入操作失败，可能会导致数据不一致 。
数据类型：IndexedDB可以存储任何类型的数据，包括二进制数据，而LocalStorage只能存储字符串。对于需要存储图片、地理信息系统（GIS）数据等二进制格式的地图应用来说，IndexedDB是更合适的选择 。
API丰富性：IndexedDB提供了丰富的API，支持数据的增删改查以及游标的使用，可以方便地进行分页查询和范围查询。而LocalStorage的API相对简单，只提供了基本的设置、获取和删除操作 。
综上所述，对于需要处理大量数据、复杂查询和高并发操作的前端地图应用，IndexedDB比LocalStorage提供了更加强大和灵活的数据存储解决方案。
什么是瀑布流布局？怎么实现瀑布流？
瀑布流布局（Masonry Layouts）是一种流行的网页布局方式，它的视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。瀑布流布局的核心是基于一个网格的布局，每行包含的项目列表高度是随机的，同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差异。
实现瀑布流布局主要有以下几种方法：
纯CSS多列布局：通过CSS3的多列属性（如
column-count、column-gap、break-inside等）来实现瀑布流布局。这种方法简单，但不支持自适应列宽和高度排序，适用于等宽等高或等宽不等高的布局场景。CSS弹性布局：使用CSS的弹性盒子布局（Flexbox）来实现横向瀑布流布局。这种方法可以很好地适应不同屏幕尺寸，但同样不支持高度排序。
JS动态计算：通过JavaScript动态计算每个元素的位置，将元素放置在高度最小的列中。这种方法可以实现更复杂的布局效果，如横向瀑布流加高度排序，但可能会有性能损耗。
使用现成的库或组件：例如使用
react-masonry-component2这个npm包，可以在React项目中快速实现瀑布流布局，支持纵向、横向、高度排序以及根据屏幕宽度自适应列数等多种场景。绝对定位：通过精确计算每个子元素的位置，使用绝对定位将元素放置在瀑布流中合适的位置。这种方法计算量较大，可能会有高度塌陷问题，且在移动端适配时可能会有问题。
插件实现：使用专门的瀑布流布局插件，如
vue-waterfall2，可以简化实现过程，但可能不适用于复杂的业务场景。
每种方法都有其适用场景和优缺点，开发者可以根据具体需求选择合适的实现方式。瀑布流布局适用于图片展示、商品列表等场景，能够提供良好的用户体验和视觉吸引力。