53 lines
1.9 KiB
JavaScript
53 lines
1.9 KiB
JavaScript
import { div, pre } from './main.js'
|
|
|
|
// 简单示例
|
|
document.body.appendChild(div.w(128).h(64).text('Hello world').click(event => {
|
|
console.log('click !')
|
|
}))
|
|
|
|
// 瀑布流画廊
|
|
const data = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
|
|
const main = div.w(640).h(640).text('main').relative({ top: 0 }).m({ top: 24 }).transition({ type: 'opacity', duration: 700, am: 'ease-in-out' }).childrens([
|
|
...data.map(item => div.w(64).h(64).text(item))
|
|
])
|
|
document.body.appendChild(main)
|
|
|
|
// 屏幕宽高变化时, 重新排列
|
|
window.onresize = () => {
|
|
console.log('屏幕宽高变化')
|
|
let 各列高度 = []
|
|
let 容器宽度 = document.body.clientWidth
|
|
let 高分屏 = window.devicePixelRatio === 1 && 容器宽度 > 1280
|
|
let 列宽 = 高分屏 ? 480 : 320
|
|
let 间距 = 高分屏 ? 16 : 8
|
|
let 列数 = parseInt(容器宽度 / (列宽 + 间距)) || 1
|
|
let 边距 = (容器宽度 - 列数 * 列宽 - (列数 - 1) * 间距) / 2
|
|
for (let i = 0; i < 列数; i++) {
|
|
各列高度.push(0)
|
|
}
|
|
for (let item of main.children) {
|
|
let 最低 = Math.min(...各列高度)
|
|
let 列号 = 各列高度.indexOf(最低)
|
|
let 位置 = (列宽 + 间距) * 列号 + 边距
|
|
let 元素宽 = parseInt(item.getAttribute("data-w"))
|
|
let 元素高 = parseInt(item.getAttribute("data-h"))
|
|
let 缩放比 = 元素宽 / 列宽
|
|
let 缩放高 = parseInt(元素高 / 缩放比)
|
|
item.style.top = 最低 + "px"
|
|
item.style.left = 位置 + "px"
|
|
item.style.width = 列宽 + "px"
|
|
item.style.height = 缩放高 + "px"
|
|
item.style.background = '#ccc'
|
|
各列高度[列号] += 缩放高 + 间距
|
|
}
|
|
let 最高 = Math.max(...各列高度)
|
|
if (main) main.style.height = 最高 + "px"
|
|
}
|
|
|
|
window.onresize()
|
|
|
|
// 展示源码
|
|
fetch('./index.js').then(res => res.text()).then(text => {
|
|
document.body.appendChild(pre.text(text))
|
|
})
|