标签: jquery-masonry

关于masonry.js,我有一个奇怪的问题,我似乎无法找到其他任何地方.

我有最新的(3.10)版本,我将它包含在我的wordpress主题的functions.php文件中,如下所示:

function enqueue ()
{
    wp_register_script( 'masonry', get_stylesheet_directory_uri() . '/js/masonry.js', array( 'jquery' ) );
    wp_enqueue_script( 'masonry' );
}

add_action( 'wp_enqueue_scripts', 'enqueue');

哪个加载脚本很好.就像现在一样,我没有做任何其他事情,但脚本失败了:

Uncaught TypeError: Cannot call method 'create' of undefined masonry.js?ver=3.5.2:37

好像它不能在窗口上调用create.Outerlayer因为它不存在.

这是有问题的代码,从第34行开始,来自masonry.js:

// used for AMD definition and requires
function masonryDefinition( Outlayer, getSize ) {
  // create an Outlayer layout class
  var Masonry = Outlayer.create('masonry');

  Masonry.prototype._resetLayout = function() {
    this.getSize();
    this._getMeasurement( 'columnWidth', 'outerWidth' );
    this._getMeasurement( 'gutter', 'outerWidth' );
    this.measureColumns();

    // reset column Y
    var …

大家好,我希望你做得很好.我正在使用Isotope,下面你可以看到我写的JavaScript.li如果它们是Isotope元素,我发现不可能将元素集中在一起.要通过居中查看我的意思,请参阅下面的图片.我已经设法将整个同位素集中到屏幕上,但我需要将元素集中在一起,而不是只浮动到左侧.

让我们从我的脚本代码开始:

<script>
 $(document).ready(function(e) {
    $(".ullist li").addClass('element-item');
});

</script> 
<script>
$(document).ready(function(e) {
// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  //layoutMode: 'fitRows',
});
//$('.grid').isotope({ layoutMode : 'fitRows' });
// filter functions
var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return …

有谁知道如何从下往上制作jQuery砌体堆栈？我写了一些基本的JS来自下而上堆叠东西,但是它不能像在最短的列上堆叠下一块砖和跨越多列的砖块那样做一些粗糙的东西.由于我对Math不熟悉,查看源代码只会让我头晕目眩.

有人想试试吗？

似乎当我尝试加载页面时,所有图像都堆叠在一起.但是如果你点击链接将你带到同一个页面(比如主页链接),那么砌体就会启动.所以我认为砌体加载太早,就像jquery准备页面之前一样.

在这里我的jquery调用:

$(document).ready(function(){
    $('#image_roll_container').masonry({
        itemSelector: '.box'
    });

....

这是有问题的页面:

http://ratattoos.com/

它在firefox和IE8中运行得很好.

任何人都可以建议这个网站如何使用jQuery Masonry插件进行响应,流畅的布局？

http://tympanus.net/codrops/collective/collective-2/

特别;

浏览器调整大小的列数从3变为2,这是您对使用砌体的网站的期望,但有趣的是列也会调整大小以始终填充可用的整个宽度.我见过的大多数其他砌体网站都会在列的右侧留下间隙,因为列数会发生变化(例如http://masonry.desandro.com/)或者列填充整个宽度但是列的数量保持不变(http://masonry.desandro.com/demos/fluid.html).他们是否动态设置浏览器调整大小与CSS媒体查询相结合的列数,或者他们是否正在使用CSS3列？

谢谢.

我正在为摄影师建立一个网站.它应该使用Bootstrap 3框架构建,并且他希望在一个页面上拥有超过400个图像的砖石.为了工作,LazyLoad是必须的.我现在花了几天时间试图让LazyLoad与 Desandros Masonry合作,但没有成功..

我已经尝试了所有人发现谷歌搜索的例子,但大多数帖子/网站/论坛只是重定向你,或者已经复制了这个stackoverflow答案: 组合LazyLoad和Jquery Masonry

我尝试了两种方法,但不幸的是我只得到了灰白的头发..... :(

以下是我正在使用的页面的简化实时版本:
http://nr.x10.mx
在此示例中,我在页面加载时添加了淡入,但是由于我可以使其工作,因此将LazyLoad保留了.

在这里你有一个以下的FIDDLE

var container = document.querySelector('#ms-container');
imagesLoaded( container, function() 
{
   var msnry = new Masonry(container, 
                                     { itemSelector: '.ms-item',
                                       columnWidth: '.ms-item',});
}); 

您也可以在这里下载整个包,包括jquery.lazyload.js HERE

任何帮助将受到高度赞赏

UPDATE

在这里,您可以找到4个不同问题的不同示例.我也很高兴Bootstrap .img-responsive类干扰了LazyLoad.

1 - 没有
LazyLoad 2的砌体 - 砌体和Lazyload - 砌体破坏而LazyLoad没有效果
3 - LazyLoad没有砌体 -
LazyLoad 没有效果4 - LazyLoad没有砌体和Bootsrap"img-responsive"删除
5 - Masonry&LazyLoad使用第一种方法上面提到的SO答案
6 - Masonry&LazyLoad使用上面提到的SO答案的第二种方法
最后两种方法都给出了以下错误:[错误] TypeError:'undefined'不是一个函数(评估'$ container.imagesLoaded')全局代码(5.html,第110行) …

我有一个简单的砖石网格.当它加载时,.content类是可见的.当您重新加载项目流入彼此.

这只发生在Chrome和Safari中,在Firefox中它看起来不错.

这是网格中的css:

#media_list {} 
#media_list .media_item  {  height: auto; width: 270px; display: inline-block; background: #f4f4f4; border: 1px solid #d9d7d5; float: left; padding: 10px 0px 10px 0px; font: 11px Helvetica Neue; }
#media_list .media_item .date { color: white;  background: #2f343a; padding: 10px 5px; width: 260px; float: left; margin: 0px 0px 15px 0px;}
#media_list .media_item .content { padding: 15px; float: left; display: inline-block; margin-bottom: 20px; }
#media_list .media_item img { border: 1px solid #dedddd;  margin: 0px 0px …

我正在为图片库进行砌体布局.但是砖石建筑大多数时候都会显示出相互重叠的图像.其余时间它的确定,有时一些图像div溢出到它们的封闭div下面的div.

如何包含这些图像而不是防止重叠.我认为imagesLoaded方法已被弃用.

好的,这是我的代码:

部分图像的示例.会有很多

<div class="container span3" >
        <div class="image">
            <div class="content">
                <a href="/issues/<%= image.id %>"></a>
                <%= image_tag(image.photo.url(:medium)) %>
            </div>
        </div>
        <div class="title">
            <h2><a href="/images/<%= image.id %>"><%= truncate(image.title, :length => 20, :omission => '...') %></a></h2>
        </div>
    </div>

附上代码:

<div class="images-grid">
  <div class="row" id="images_container">
    <%= render :partial => 'shared/images' %>
  </div>
</div>

CSS:

.images-grid .container .image {
    overflow:hidden;
    position:relative;
}

.images-grid .container .image img {
    height:auto;
    width:100%;
}

.images-grid .container {
    display:inline-block;
    background-color:#fff;
    margin-bottom:30px;
    padding-bottom:10px;
    position:relative;
}

JQuery的:

$(document).ready(function() {
    var …

砌体无限滚动追加html5视频重叠

我目前正在使用imagesLoaded库来检查图像是否已加载然后调用masonry.

但它没有使用html5视频标签,因为这些视频相互重叠.

所以我改变调用masonry从document.ready到window.load并删除呼叫imagesLoaded从此即在初始加载

$(document).ready(function(){

    var $container = $('#media');
    // layout Masonry again after all images have loaded
    $container.imagesLoaded( function() {

      $container.masonry({
          "columnWidth": "." + "col-sm-2",
          itemSelector: '.item',
          gutter: 0,
        });
      $('.item').css('opacity', '1.0');
    });

});

对此

$(window).load(function(){
        var $container = $('#media');

          $container.masonry({
              "columnWidth": "." + "col-sm-2",
              itemSelector: '.item',
              gutter: 0,
            });
          $('.item').css('opacity', '1.0');
});

现在html5 videos在masonry重叠,并在页面的第一次加载完美渲染initial load,但是,因为我也使用在滚动页面上infinite-scroll添加更多images/videos,所以当新视频被添加到容器时它们正在重叠,这种行为是由早期引起的masonry …

在目录网站上使用Masonry.默认情况下,显示的项目按日期排序,然后按部件号排序.我的图像高度不一.问题是,如果我错了,请纠正我,Masonry将第2行,第1项设置在第1行中的最短项目下方,而不是在页面左侧.换句话说,当我的数据库返回某个订单时,Masonry将这些项目从上到下排列(当变化高度时),而不是从左到右.

我没有在文档中找到任何控制它的东西.有没有办法强迫砌体按顺序从左到右依次保持物品,并根据高度垂直漂浮？

我试图发布插图,但显然我没有资格这样做.这是插图的链接: