Giter Club home page Giter Club logo

brenner8023.github.io's Introduction

Stats PR Issue

Active on

brenner8023.github.io's People

Stargazers

avatar

Watchers

avatar

Forkers

hhy5277

brenner8023.github.io's Issues

一种紧凑树型布局算法的实现

phenomLi/Blog#29

该链接讨论了树形结构布局算法的实现方式及问题解决方案。以下是该链接中的讨论点：

从下向上递归算出每个节点的“宽度”，父节点的宽度等于其所有子节点宽度的和，从上向下根据父节点的宽度计算出同一层节点的位置，最后递归得到所有节点的位置。这种方法在节点数较少的情况下效果较好，但当最后一层节点数过多时，整个画布会变得特别宽，需要加入交互功能或使用非层次的树形结构布局算法。[0]
传统的树形布局通常将子节点按照兄弟节点的最大宽度分开，这种方式在视觉上不够美观，比较浪费空间。而一种树形结构布局算法的规则是：子节点相对于父节点成等腰排列，即根节点位于叶子节点两端距离上方正中间，在所有节点不重叠的情况下相邻节点间距相等，所有节点均不能重叠。该布局较为美观，而且空间利用率较高。[0] [2]
从上往下，先根据相邻节点间的最小间距和父子节点间的间距对树进行第一次布局，然后从根节点开始，人为设定好根节点的坐标，将根节点的子节点挂在根节点下，且子节点分布在根节点的高度下方，子节点彼此间距为相邻节点间的最小间距且相对于根节点对称分布，递归进行此步骤，直到所有节点都布局好。[0]
对数据进行后序遍历，由同层级的若干个子节点推算出父节点的位置，再一层一层推至根节点的位置，这种方法不行，因为子节点的位置也要依赖父节点计算，总之一次遍历是实现不了的。[0]
如果高度不一样，并且没有足够的间隔的话，线和图元会相互覆盖，可以取一行中高度最大的节点的高度。[0]
该链接中还提到了一篇介绍虚拟DOM的文章，该文章解释了虚拟DOM的实现原理，可以对React底层有一个大概的了解或提供实现一个虚拟DOM库的思路。

CSS sticky实现返回顶部

CSS sticky实现返回顶部

总结：
本文主要介绍了如何使用CSS实现一个自动显示返回按钮的小交互。文章介绍了如何使用CSS sticky实现粘性滚动效果，并实现自动显示返回按钮的效果。本文的实现要点如下：

  • 使用CSS sticky实现粘性滚动效果，可以设置负值，transformY(100vh)可以偏移1屏幕高度，不影响占位；
  • 浮动可以脱离文档流，不影响高度；
  • 负的margin可以抵消浮动的环绕效果；
  • scroll-behavior: smooth 可以实现平滑滚动；
  • 兼容性取决于sticky，不兼容IE。

除此之外，文章还介绍了如何使用浮动实现按钮位于右下角的效果，以及如何解决头部文字过长导致的按钮环绕效果问题。同时，文章也强调了CSS相比于JS而言，使用起来简单方便，也无需考虑加载问题，几乎零成本。

基于伪随机数生成36位uuid 

export function uuidv4 () {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {   
     let r = Math.random() * 16 | 0;
     let v = c === 'x' ? r : (r & 0x3 | 0x8);
     return v.toString(16);  
  });
}

git合并代码 

git cherry-pick xxx -n

git merge --no-ff dev

git rev-list --right-only xxx^...xxx --reverse --no-merges | git cherry-pick --stdin

JavaScript数组去重 

arr.reduce((total, curr) => {
  if (total.includes(curr)) {
    return total;
  }
  total.push(curr);
}, []);
Array.from(new Set(arr))

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.