何となくどうぶつフォトコンテストアプリを作りたくなったので、PinterestライクなUIをMonaca IDEでサクッと作ります。

こんなの

ライブラリはあるけど・・

Masonry
https://masonry.desandro.com/

スマホだから2カラムで良いし、何か大袈裟な気がする。

CSSで作る

まずはCSSで作ってみます。
段組みレイアウト（CSS Columns）を使えばよさそうです。

ons.bootstrap()
  .controller('PhotoController', function() {
    this.photos = [
      {
        url: './img/214hariIMGL9360_TP_V.jpg',
        text: '１．かわいいやろ？かわいいやろ？かわいいやろ？',
        imageHeight: '200px'
      },
      {
        url: './img/214hariIMGL9876_TP_V.jpg',
        text: '２．かわいいやろ？かわいいやろ？かわいいやろ？かわいいやろ？かわいいやろ？',
        imageHeight: '600px'
      },
      {
        url: './img/C784_edawokuwaerugorira_TP_V.jpg',
        text: '３．かわいいやろ？かわいいやろ？かわいいやろ？',
        imageHeight: '180px'
      },
      {
        url: './img/inosisiFTHG2811_TP_V.jpg',
        text: '４．かわいいやろ？かわいいやろ？かわいいやろ？かわいいやろ？',
        imageHeight: '150px'
      },
      {
        url: './img/miyaDSC_4461_TP_V.jpg',
        text: '５．かわいいやろ？かわいいやろ？かわいいやろ？かわいいやろ？',
        imageHeight: '240px'
      },
      {
        url: './img/nuko-9_TP_V.jpg',
        text: '６．かわいいやろ？',
        imageHeight: '300px'
      },
      {
        url: 'https://pbs.twimg.com/profile_images/581025665727655936/9CnwZZ6j.jpg',
        text: '７．かわいいやろ？かわいいやろ？かわいいやろ？',
        imageHeight: '300px'
      }
    ];
  });

<ons-page ng-controller="PhotoController as vm">
  <div class="header">動物フォトコンテスト開催中</div>

  <div class="photos">
    <div class="photo" ng-repeat="photo in vm.photos">
      <div class="photo-image" ng-style="{ backgroundImage: 'url('+ photo.url +')', height: photo.imageHeight }"></div>
      <div class="photo-text">{{ photo.text }}</div>
    </div>
  </div>
</ons-page>

.header {
  padding: 16px;
  background-color: white;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

.photos {
  -webkit-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 30px;
  column-gap: 8px;
  padding: 8px;
}

.photo {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 8px;
  background-color: white;
  border-radius: 12px;
}

.photo-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: zoom-in;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.photo-text {
  padding: 8px;
}

でもこれだと、1カラム目を描画してから、2カラム目を描画していて、コレジャナイ感があります。

Pinterestを観察

ちゃんと高さが低いカラムから埋めてますね。
これがやりたいんですよ。

次にソースコードを見て、どんな感じに実装しているのか観察します。
すべての要素をposition: absolute; left: 0; top: 0;で左上に固定して、そこからtransform: translateX(**px) translateY(**px)で配置しているようです。

JSで作る

この方法だとJSで作る必要が有ります。
今回はAngularJSで作ります。汎用性を考えて、ディレクティブで作ります。

ons.bootstrap()
  .controller('PhotoController', function($scope, $timeout) {
    // CSSで作った、と同じため省略…
  }).directive('pinterestLikeGrid', function () {
    return {
      restrict: 'E',
      transclude: true,
      replace: true,
      template: '<div class="pinterest-like-grid" ng-transclude></div>',
      scope: {
        gutterWidth: '@',
        gutterHeight: '@'
      },
      link: function (scope, element, attrs) {
        var gutterWidth = parseInt(attrs.gutterWidth, 10) || 8;
        var gutterHeight = parseInt(attrs.gutterHeight, 10) || 8;
        var photosElem = element[0];
        scope.$watch(function () {
          return photosElem.childNodes.length; // 子要素の件数が変わったらレイアウトを調整
        }, function() {
          // 2カラムなので、親の横幅÷2。余白分も差っ引く
          var width = (photosElem.offsetWidth - gutterWidth*3) / 2;
          var photoElems = photosElem.querySelectorAll('.pinterest-like-grid-item');

          var firstColHeight = gutterHeight;
          var secondColHeight = gutterHeight;
          // 子要素を1件ずつ配置していく
          photoElems.forEach(function (photoElem) {
            photoElem.style.width = width + 'px';

            var height = photoElem.offsetHeight;
            var x, y;
            // 高さの低い方のカラムに配置する
            if (firstColHeight <= secondColHeight) {
              // 1カラム目
              x = gutterWidth;
              y = firstColHeight;
              firstColHeight = firstColHeight + height + gutterHeight;
            } else {
              // 2カラム目
              x = width+gutterWidth*2;
              y = secondColHeight;
              secondColHeight = secondColHeight + height + gutterHeight;
            }
            photoElem.style.transform = photoElem.style.webkitTransform = 'translateX(' + x + 'px) translateY(' + y + 'px)';
            photoElem.style.height = height + 'px';
          });
        });
      }
    };
  }).directive('pinterestLikeGridItem', function () {
    return {
      restrict: 'E',
      transclude: true,
      replace: true,
      template: '<div class="pinterest-like-grid-item" ng-transclude></div>'
    };
  });

<ons-page ng-controller="PhotoController as vm">
  <div class="header">動物フォトコンテスト開催中</div>

  <pinterest-like-grid gutter-width="12" gutter-height="12">
    <pinterest-like-grid-item ng-repeat="photo in vm.photos">
      <div class="pinterest-like-grid-item-image" ng-style="{ backgroundImage: 'url('+ photo.url +')', height: photo.imageHeight }"></div>
      <div class="pinterest-like-grid-item-text">{{ photo.text }}</div>
    </pinterest-like-grid-item>
  </pinterest-like-grid>
</ons-page>

.header {
  padding: 16px;
  background-color: white;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

.pinterest-like-grid {
  position: relative;
}

.pinterest-like-grid-item {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 8px;
  background-color: white;
  border-radius: 12px;
  position: absolute;
  left: 0;
  top: 0;
}

.pinterest-like-grid-item-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: zoom-in;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.pinterest-like-grid-item-text {
  padding: 8px;
}

ポイントとしては、widthのスタイルを変更してから、高さをoffsetHeightで取得している点です。
widthを変える前は1/1カラムなので、widthを1/2カラム分の変更してから高さを取得します。

後は、transform には、translateXとtranslateYだけ設定します。translateZを0にするとiOSのMobile Safafiでスクロールした際に画面がチラつきます。（Safafiのバグっぽい）

ちなみに、topとleftの位置を変更しても良いですが、transformの方がGPUレイヤーで描画されるので速そうです。（検証はしてない）

画面

うん、なんかいい感じ。

次回へ続く

UIができたので、次回はサーバー側を作ってみます。（気が向いたら）