0

jQuery Masonryは素晴らしいですが、ページの左上にコーナースタンプを表示させることができた人はいますか？に変更してみましfloat: left;たが、うまくいかなかったようです。

また、ウィンドウのサイズを変更しても、サイズ変更はコーナースタンプに合わせて自動的に調整されません。

これがCSSです

.corner-stamp {
width: 270px;
height: 300px;
padding: 10px;
float: right;
background: red;
color: white;
-moz-border-radius: 15px 0px 15px 0px;
-webkit-border-radius: 15px 0px 15px 0px;
border-radius: 15px 0px 15px 0px;
}

これがJSです：

$.Mason.prototype.resize = function() {
  this._getColumns();
  this._reLayout();
};
$.Mason.prototype._reLayout = function(callback) {
  var $cornerStamp, cornerStampX, freeCols, i;
  freeCols = this.cols;
  if (this.options.cornerStampSelector) {
    $cornerStamp = this.element.find(this.options.cornerStampSelector);
    cornerStampX = $cornerStamp.offset().left - (this.element.offset().left + this.offset.x + parseInt($cornerStamp.css("marginLeft")));
    freeCols = Math.floor(cornerStampX / this.columnWidth);
  }
  i = this.cols;
  this.colYs = [];
  while (i--) {
    this.colYs.push(this.offset.y);
  }
  i = freeCols;
  while (i < this.cols) {
    this.colYs[i] = this.offset.y + $cornerStamp.outerHeight(true);
    i++;
  }
  this.layout(this.$bricks, callback);
};
$container = $("#streams");
$container.imagesLoaded(function() {
  $container.masonry({
    itemSelector: ".stream-item",
    columnWidth: 60,
    isAnimated: false,
    isFitWidth: true,
    cornerStampSelector: '.corner-stamp'
  });
});
4

2 に答える 2

0

おそらくここで必要なコードをgithubで見つけることができます

于 2012-08-06T00:18:35.593 に答える
0

フロート左の場合、最善の策は、「コーンスタンプ」タイルがリストの最初のタイルであることを確認することです。

また、コーナースタンピングで遊んでいて、設定isFitWidth: trueがコーナースタンピングに干渉していることに気づきました。

左隅のスタンプのより良い方法を見つけた場合は、私に知らせてください。また、右隅のスタンプを作成する方法を見つけても、タイルをページの中央に配置する場合は、お知らせください。

ありがとう。

于 2012-09-14T17:57:51.723 に答える