牛耳教育长沙Web大前端每天5道面试题.pdf

【瀑布流布局】是Web前端开发中常见的网页布局方式，尤其在展示图片或者商品时非常流行。这种布局的特点是每个元素的宽度固定，但高度不一，形成类似瀑布的效果，新元素会填充到前一列的底部。实现瀑布流布局的基本步骤如下： 1. **计算列数**：我们需要获取父容器的宽度以及每个子元素的宽度。通过将浏览器窗口的宽度除以单个子元素的宽度，可以得出可以并排放置的列数。 2. **设置父容器宽度**：为了让布局居中，父容器的宽度应设置为列数乘以子元素的宽度。 3. **初始化高度数组**：创建一个数组，用于存储每列的高度，初始值为0。 4. **定位子元素**：遍历所有子元素，对于第一行的子元素，直接将它们的高度添加到对应列的高度数组中。对于后续行的子元素，找到当前数组中高度最小的那一列，将子元素定位到该列的底部。 5. **滚动加载**：监听`scroll`事件，当用户滚动到接近页面底部时，检查是否需要加载更多内容。判断条件通常为最后一个元素的底部距离视口顶部的距离小于或等于视口高度加上滚动的距离。 在给定的代码中，`waterFull`函数实现了瀑布流布局，它接收父容器和子元素类名作为参数。`getMinBoxIndex`函数用于查找高度数组中最小高度的索引，而`checkWillLoadImage`函数则用于判断是否需要加载更多内容。 此外，**页面间通信**在原生JavaScript中有多种实现方式： 1. **URL参数传递**：通过在URL地址栏添加查询字符串，可以从一个页面向另一个页面传递数据。例如：`http://example.com/?key1=value1&key2=value2`。 2. **Cookie**：使用`document.cookie`来设置和读取cookie，不同页面之间可以通过共享cookie来交换信息，但要注意大小和有效期限制。 3. **Local Storage和Session Storage**：这两个HTML5特性允许在客户端存储数据，`localStorage`持久化存储，`sessionStorage`仅在会话期间有效。不同页面可以访问同一域下的存储数据。 4. **Window.postMessage()**：这是一种安全的跨窗口通信方式，允许不同源的脚本通过`message`事件发送和接收消息。 5. **URLSearchParams接口**：HTML5引入的新API，可以方便地操作URL查询字符串，进行页面间的数据传递。 6. **IFrame通信**：利用`postMessage`和事件监听，同一页面内的IFrame或不同页面的IFrame之间可以相互通信。 7. **Web Workers**：虽然主要用于处理后台任务，但也可以通过`MessageChannel`实现在工作线程与主线程之间传递信息。 了解这些技术对Web前端开发者来说非常重要，因为它们在实际项目中都有着广泛的应用。无论是创建美观的瀑布流布局，还是实现页面间的通信，都是提升用户体验的关键。