ionic3에서 무작위 레이아웃 폭포 흐름을 구현하는 방법-JS 튜토리얼-php.cn

이 글은 ionic3 실용 튜토리얼에서 랜덤 레이아웃 워터폴 흐름의 구현 방법을 주로 소개합니다. 이 글은 샘플 코드와 그림을 통해 이를 아주 자세하게 소개합니다. 이는 모든 사람의 공부나 업무에 대한 특정 참고 학습 가치를 갖습니다. 아래에서 함께 공부해보세요.

머리말

최근 프로젝트 요구로 인해 ionic3을 접하게 되었는데, 이것이 정말 날카로운 도구라는 것을 알게 되었습니다! ionic 프로젝트는 ionic3에서도 업그레이드된 풍부한 아이콘 라이브러리 세트를 제공합니다.

회사에서 진행하는 프로젝트 중 하나에 폭포수 특수효과가 필요했는데, 한참을 찾아봐도 관련 자료가 없어서 하게 됐어요~

고민도 없이,

그림을 본 학생들은 그 의미를 이해할 것이라고 믿습니다. 응, 폭포야!

하지만 오늘 우리의 폭포는 평범한 폭포가 아닙니다. 계속해서 살펴보겠습니다.

자동 레이아웃

우리의 요구 사항은 무작위적이고 지저분한 느낌을 만드는 것입니다. 따라서 페이지에 표시할 이미지의 최적 배열을 선택하는 메커니즘을 만들어야 합니다.

angular4

이 효과는 일반 JQ 플러그인에서는 구현하기 어렵지 않을 것 같습니다. , 온라인에서 일부 jq 플러그인을 검색할 수도 있습니다. 하지만 우리의 기술 스택은 Angular4입니다~

ng에서는 DOM 작업이 기본적으로 명령어에 배치되어 있습니다. 저는Angularjs1.x를 사용해 본 학생들이 이에 익숙하다고 믿습니다~, Angle4에서도 마찬가지입니다.

좋아, 코드를 올려보자~

지시문 만들기

이미 ionic에 관련 구성 요소를 설정하고 이미 이미지 데이터가 있다고 가정합니다. 관련 근거가 없으면 내 반 친구들이 제안합니다. 먼저 ionic3 및 angle4에 대한 소개를 살펴보세요.

이것은 내 구성요소 HTML 페이지 중 하나입니다. 아마도 눈썰미가 있는 학생들이 우리 명령인 [imagr-sort]="item"을 발견했을 것입니다. 예, 우리 명령에는 현재 이미지의 각도 데이터가 필요합니다.

ionic g directive image-sort 명령을 생성하여 우리를 생성한 명령을 실행합니다. ionic g directive image-sort执行建立我们的指令。

创建完了我们的自定义指令就是这个样子，空空如也啊~

编写我们的逻辑

1.1接收并且注入一些东西:

看图！

既然我们在模板中有输入([[imagr-sort]="item"]);那么我们也当然应该在指令中接收到输入的数据；如截图中红色箭头所示，我将输入的数据保存了起来->sourceArr;

然后我们在angular4中如果要获取到dom宿主的一些属性了，元素了等等就要用到ElementRef，Renderer2是angular4中的一个类似渲染器的东西吧，这个具体的我还没有搞懂，大家可以多看看这块的资料，我主要是在这个指令中用于更改Dom的一些结构。

关于我们的imgLength ，我待会再说

1.2实际点！图片是从异步加载过来的！

我们首先思考这样一个问题：

我们的指令是在angular数据渲染的时候就开始执行的，这个是基本大家都懂。

but！我们的图片可都是异步加载的呢~，所以自然而然我们要有一个图片加载的过程:

嗯，相信各位早就想到了---->image.onload

사용자 정의 지침을 만든 후, 이것이 다입니다. 아무 것도 아닌 것 같습니다~🎜🎜🎜🎜로직 작성🎜🎜🎜🎜🎜1.1은 무언가를 수신하고 주입합니다.🎜🎜🎜그림을 보세요! 🎜🎜

🎜🎜템플릿에 입력이 있으므로([[imagr-sort]="item"]); 그런 다음 스크린샷에 빨간색 화살표로 표시된 것처럼 명령에서 입력 데이터를 받아야 합니다. 입력 데이터를 저장했습니다. > sourceArr;🎜🎜Angular4에서 DOM 호스트, 요소 등의 일부 속성을 얻으려면 ElementRef를 사용해야 합니다. Renderer2는 Angle4의 렌더러와 유사한 것입니다. 이 정보에 대한 자세한 내용을 읽을 수 있습니다. 나는 주로 Dom의 일부 구조를 변경하기 위해 이 명령을 사용합니다. 🎜🎜저희 imgLength에 대해서는 나중에 얘기하겠습니다🎜🎜🎜1.2 실용적인 포인트! 그림이 비동기적으로 로드됩니다! 🎜🎜🎜먼저 이 질문에 대해 생각해 봅시다: 🎜🎜우리의 명령은 각도 데이터가 렌더링될 때 실행되기 시작합니다. 이는 기본적으로 모든 사람이 이해합니다. 🎜🎜하지만! 이미지는 모두 비동기식으로 로드되므로 당연히 이미지 로드 프로세스가 필요합니다.🎜🎜

🎜🎜글쎄, 이미 생각해 보셨을 거라 믿습니다--->image.onload, 네, 바로 그거예요~🎜🎜이제 이야기할 시간입니다 이전 imgLength는 완료된 이미지 수를 기록하는 데 사용됩니다. 이는 현재 이미지가 로드되었는지 식별하고 후속 작업의 기초를 제공하는 데 사용됩니다. 🎜

image.onerror, 이는 이미지 로드에 실패한 함수입니다. 제가 하는 작업은 원래 DOM인 Angle 데이터에서 로드에 실패한 이미지를 제거하는 것입니다. 도태. image.onerror,这个相信大家也看明白了吧，这个是图片加载失败的一个函数，我在里面做的操作是将加载失败的图片从原始的DOM中，angular的数据剔除。

这里面就用到了我们angular的渲染器this.render2();

相关功能方法大家可以去源码里面看一下，基本上所有常用的Dom操作都有实现。

for循环呢是因为我们的图片数据是多条的，所以我们要等待每一张图片都顺利的加载完成。

ps:注意在onerror与onload的函数中使用this要在imgOnlod中使用变量引用let _self = this;

图片加载完成开始我们的改造工程

1.3将我们的适口按照网格划分

imageStartStort()！

上图

大家看1图红圈内，我是自己划分出五个横向网格标准，便于我们待会将图片比例做对比。

1.4将我们的图片定义网格占用

我们创建了一个数组allImageArr=[];用于保存当前处理过的所有图片的数据。

还记的我们之前获得的angular的数据吧，我们通过循环它来将图片划分网格占用。

我们的循环中都做了些什么？

1.图片的宽高，并且求出每一张图片的比例。

2.将获得的图片比列与我们自己定义的网格比例进行区间划分。

3.按照我们划分的网格来计算出占有网格的图片的新的宽度，所占网格数储存并且记录保存到我们的自定义的allImageArr中，并且在原有的angular数据中添加gridding数字那个记录相应的网格数。

执行this.pictureColumnSort

Angular 렌더러 this.render2();가 사용됩니다.

관련 함수 및 메서드에 대한 소스 코드를 확인할 수 있습니다. 기본적으로 일반적으로 사용되는 모든 Dom 작업이 구현됩니다.

for 루프는 여러 개의 이미지 데이터가 있기 때문에 각 이미지가 원활하게 로드될 때까지 기다려야 합니다.

ps:

onerror 및 onload 함수에서 이것을 사용할 때 imgOnlod

let _self = this; <p></p>
<span style="color: #ff0000"><p style="text-align: center">이미지 로딩이 완료되고 리노베이션 프로젝트를 시작합니다<img alt=""    style="max-width:90%"  style="max-width:90%" src="https://img.php.cn/upload/article/000/000/008/809465bc9b72810e0dbad820490f8954-10.jpg"></p></span><p></p>1.3 그리드에 따라 입맛을 나눕니다<p></p>
<p>imageStartStort() ! </p>
<p>위 사진</p>
<p><img alt=""    style="max-width:90%"  style="max-width:90%" src="https://img.php.cn/upload/article/000/000/008/f7a71bc403595568611c41e92a1f854c-7.jpg%20"></p>
<p>사진 1의 빨간색 원을 보세요. 나중에 사진 비율을 비교할 수 있도록 가로 격자 기준을 5개로 직접 나누어 놓았습니다. <strong></strong></p>1.4 이미지 정의 그리드를 차지하세요<p></p>
<p style="text-align: center"><img alt=""    style="max-width:90%"  style="max-width:90%" src="https://img.php.cn/upload/article/000/%20000/008%20/42ef2f10a5f891a9ffdfdf7fddacb419-8.jpg"><img alt="" src="https://img.php.cn/upload/article/000/000/008/809465bc9b72810e0dbad820490f8954-11.jpg"></p>
<img alt="" src="https://img.php.cn/upload/article/000/000/008/42ef2f10a5f891a9ffdfdf7fddacb419-9"><p> <br> 현재 처리된 모든 이미지의 데이터를 저장하기 위해 allImageArr=[]; 배열을 만들었습니다. </p>
<p>이전에 얻은 각도 데이터를 기억하고 이미지를 반복하여 그리드로 나눕니다. </p>
<p>우리 루프에서는 무엇을 하나요? </p>
<p> 1. 사진의 너비와 높이, 그리고 각 사진의 비율을 찾아보세요. <strong></strong> 2. 획득한 이미지 비율을 자체 정의된 그리드 비율에 따라 간격으로 나눕니다. </p>
<p> 3. 우리가 나눈 그리드에 따라 그리드를 차지하는 이미지의 새로운 너비를 계산하고, 점유된 그리드 수를 저장하고 이를 사용자 정의 allImageArr에 기록하고, 원래 각도 데이터에 그리드를 추가합니다. 숫자는 해당 그리드 번호를 기록합니다. . </p>
<p style="text-align: center"><code>this.pictureColumnSort

메소드를 실행하세요

다음으로 열정의 순간을 가져보세요~

1.5 사진 정렬, 그리드에 따라 가장 적합한 것을 선택하세요. ~

pictureColumnSort()!

위 그림

사실 이 과정에 대해서는 별로 할 말이 없습니다. 적합한 것을 인접하게 실행하고(다음 단계: goExchange 기능 실행) 마지막으로 일치하지 않는 것에 대해 별도의 5포인트 그리드 전략을 만듭니다.

🎜형식은 여러 개일 수 있습니다: 🎜🎜3+2, 1+4, 1+1 +3, 1+3 +1,2+3.. . . . . 🎜🎜왜 이렇게 행복해요~🎜🎜말할 것도 없고 필터링만 하고 사진만 보세요. 🎜🎜🎜1.6 무질서에서 주문으로의 변화. 교환 외에는 더 좋은 선택이 없어야 합니다. 🎜🎜🎜goExchange()! 위의 그림 🎜🎜🎜🎜🎜1.5의 코드를 보면 매번 이 기능을 실행합니다. 왜냐하면 일치하는 사진의 위치를 변경해야 하기 때문입니다! 🎜이 함수에서 받은 RepeatI와 RepeatA는 1.5의 이중 루프의 인덱스입니다. 이 인덱스는 그림을 변경하는 위치를 결정합니다. 🎜🎜코드에 표시된 원리는 현재 이미지 뒤에 있는 일치하는 이미지를 교체하고, 교체된 이미지 위치에 그 뒤에 있는 원본 이미지를 추가하는 것입니다. 약간 혼란스럽고 제 게임 실력이 부족해서일 수도 있습니다. 하하. . 🎜🎜이 기능에 대해서는 더 말할 것도 없고 단지 위치만 변경하는 것뿐입니다. 🎜🎜🎜1.7 서로의 장점을 배워 작품을 완성해보세요! 🎜🎜🎜setHeight()! 위 그림은 🎜🎜🎜🎜🎜 다시 반복됩니다. (코드는 여전히 많이 개선되어야 하며, 반복문이 많이 사용됩니다~) 🎜🎜이 시점에서 레이아웃 페이지가 완성되었습니다. 그런데 저희는 사실 사진의 크기가 불규칙해서 보기 힘들 정도거든요. 🎜그래서 이 기능의 차이점을 보완하고 서로의 장점을 배워나가고 있어요. 🎜🎜사실 저희 사진은 확실히 조금 늘어나기 때문에 저희도 균형잡힌 중간점을 잡아서 적절한 스트레칭을 하고 있습니다. 🎜🎜이 기능은 이미지 크기 조정을 개선하기 위해 몇 가지 적절한 제한을 확실히 적용할 수 있습니다. 이 시점에서 우리는 전체 명령 논리 작성을 마쳤습니다. 🎜🎜ioinc 서브🎜🎜🎜🎜 완료!

중간 호출 과정에 대해 설명드리고 싶은 것이 하나 있습니다:

setTimeout(() => {
  _self.setHeight(angularImageList, ele);
  });

로그인 후 복사

저는 야간 근무에 무기력할 때만 전체 호출을 사용했습니다. 전체 통화를 하면 데이터가 설명할 수 없을 정도로 사진 위치에 나타납니다. 교체 오류, 지금까지의 오해, 전문가가 전체 솔루션을 볼 수 있다면 공유해 주세요.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.