demo

README.md

@@ -1,8 +1,9 @@
 # chain-depict
 
-受到 pug 和  tailwind, windicss 启发的,
+受到 pug 和 tailwind, windicss 启发的,
 使用纯粹 js 书写 UI
 
+0. 创建一个 dom 对象, 每次操作都返回它自身从而能够链式操作
 1. 提高文字的屏幕占比, 更少的屏幕空间表达更多的描述
 2. 减少文字输入, 省略不必要的属性描述冗余
 3. 响应式元素绑定, 数据变化则ui跟随变化
@@ -29,12 +30,17 @@ div.w(12).h(14).onclick.stop(click).onkeydown.esc(keydown)([
 git clone git@git.satori.love:LaniakeaSupercluster/chain-depict.git
 npm i
 npm run dev
+
+# 发布到 npm
+npm publish
 ```
 
 
 ### doc
 
 ```javascript
+import { div } form '@laniakeasupercluster/chain-depict'
+
 // 宽高(width height)
 div.w(32).h(32)         // 使用数字
 div.w('32px').h('32em') // 使用文本

index.js

@@ -1,13 +1,52 @@
 import { div, pre } from './main.js'
 
-const main = div.w(64).h(64).text('main').absolute({ top: 32, left: 32 })
-document.body.appendChild(main)
-
-
+// 简单示例
 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))
 })

main.js

@@ -32,9 +32,18 @@ export class div extends HTMLDivElement {
     static h(height) {
         return new this({ height })
     }
+    static m(margin) {
+        return new this({ margin })
+    }
+    static p(padding) {
+        return new this({ padding })
+    }
     static absolute(absolute) {
         return new this({ absolute })
     }
+    static relative(relative) {
+        return new this({ relative })
+    }
 
     w(width) {
         this.style.width = `${width}px`
@@ -44,6 +53,15 @@ export class div extends HTMLDivElement {
         this.style.height = `${height}px`
         return this
     }
+    m(margin) {
+        this.style.margin = margin
+        return this
+    }
+    p(padding) {
+        this.style.padding = padding
+        return this
+    }
+
     absolute({ top, left, right, bottom }) {
         this.style.position = 'absolute'
         if (top) this.style.top = top + 'px'
@@ -52,6 +70,17 @@ export class div extends HTMLDivElement {
         if (bottom) this.style.bottom = bottom + 'px'
         return this
     }
+    relative({ top, left, right, bottom }) {
+        this.style.position = 'relative'
+        if (top) this.style.top = top + 'px'
+        if (left) this.style.left = left + 'px'
+        if (right) this.style.right = right + 'px'
+        if (bottom) this.style.bottom = bottom + 'px'
+        return this
+    }
+    transition({ }) {
+        return this
+    }
     text(text) {
         this.textContent = text
         return this
@@ -60,6 +89,12 @@ export class div extends HTMLDivElement {
         this.onclick = callback
         return this
     }
+    childrens(childrens) {
+        childrens.forEach(element => {
+            this.appendChild(element)
+        })
+        return this
+    }
     //static get onclick() {
     //    console.log('onclick event')
     //    return {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laniakeasupercluster/chain-depict",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "main": "main.js",
   "author": "Laniakea Supercluster <huan0016@gmail.com>",