标签: masonry

我正在尝试仅使用CSS和flexbox创建水平砌体布局.我遇到的问题是元素之间存在垂直间隙,没有使用align-left: stretch;是否可以缩小间隙？

.card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  align-items: flex-start;
}


.card {
  width: 25%;
  flex: 1 0 auto;
}

完整的codepen在这里

大家好,我希望你做得很好.我正在使用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 …

有没有办法在AngularJS指令中调用orientationchange事件？

我正在使用角度砌体,当移动设备的方向发生变化时,我正在尝试更新/刷新砌体.

我发现了这个,但我想知道如何使用Angular中的$ window服务

window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  console.log(window.orientation);
}, false);

我正试图用Masonry平铺多个Instagram嵌入.问题是instagram在加载后嵌入了更改大小,因此布局留下了空白.

当页面上的所有Instagram嵌入都加载时,我可以使用回调吗？我认为我应该在Instagram嵌入加载并正确调整大小后再次触发砌体

试过$(document).ajaxStop()没办法

我的问题是我想使用bootstrap 3网格系统以块格式显示数据,但是我不希望从高度发生的恼人的空白间隙被限制在上面的行.例如,如果我这样做:

<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">longer post that is going to take more height than the others</div>
    <div class="col-lg-4">post</div>
</div>
<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
</div>

那么我将留下两行之间的空白,我想要实现的是一个砌体效果(后填充位于其上方的帖子附近),只使用CSS,特别是bootstrap 3网格系统.IE:

我知道这可以通过插件完成,但我想看看是否有更纯粹的(即使它必须是hacky)解决方案.有任何想法吗？

所以我试图在包含砌体网格的页面上实现连续循环效果.

基本上我有一个整页砌体网格,我想循环向上或向下滚动.

目前我有这个:

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  gutter: '.gutter-sizer',
  percentPosition: true,
  transitionDuration: 0
});
$grid.imagesLoaded().progress(function(imgLoad, image) {
  var $item = $(image.img);
  $item.addClass('loaded');
  $grid.masonry('layout');
});

var origDocHeight = document.body.scrollHeight;

$(".grid").contents('.grid-item').clone().appendTo(".grid");
$grid.masonry('layout');

$(document).scroll(function() {
  var scrollWindowPos = $(document).scrollTop();
  console.log(scrollWindowPos);
  console.log(origDocHeight);
  if (scrollWindowPos >= origDocHeight) {
    $(document).scrollTop(0);
  } else if (scrollWindowPos == 0) {
    $(document).scrollTop(origDocHeight);
  }
});

你可以看到我目前在这里放在一起的东西:

http://codepen.io/tenold/pen/eZbWOW

我想我很亲密.我认为困难的是,砌体从顶部开始,所有物品都冲到屏幕顶部,显然它甚至不在底部.

我很好奇是否有办法做到这一点,Masonry从中间开始并上下放置网格项目？我知道他们有一个"originTop"选项可以合并两个砌体网格吗？

如果我想要实现的目标令人困惑,请告诉我,我可以尝试更好地解释.

我从这里开始使用一些循环代码:Continuous Looping Page(Not Infinite Scroll)

所以我已经搜索了stackoverflow并发现了一些类似的文章,但没有任何对我有用.我正在创建一个rails应用程序,我想使用Masonry进行布局.我曾尝试上传JS在描述这个职位,但我无法得到它,无论多少次,我试图努力(是的,我不匹配的所有正确的ID和类).我知道gem正在工作,因为CSS加载正常,我只是不能让JS工作.这就是我现在所拥有的

的Gemfile:

# masonry layout
gem 'masonry-rails'

application.js中:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree . 
//= require masonry/jquery.masonry  

index.html.erb:

<div class="center">

<div id="masonry-container" class="transitions-enabled infinite-scroll clearfix">
    <%= render @products %>
</div>

    <div class="paginator">
    <%= will_paginate @products, renderer: BootstrapPagination::Rails %>
    </div>
</div>

_products.html.erb

<div class="box">
<% gfyid = product.gfy.to_s.gsub("http://gfycat.com/", "") %>
<h2><%= product.name %></h2>
<div class="gfySize">
    <div class="gfyitem" data-title=false data-autoplay=false data-controls=false data-expand=false data-id="<%= gfyid %>"></div>
</div>

我很迷茫,我一直在努力研究这一切.CSS工作/看起来很好,但我只是在努力与js.非常感谢任何帮助,非常感谢你!

有没有办法在React Native中使用flexbox来实现Masonry/Pinterest样式列？

我遇到了砌体的问题,如果我需要一个元素为100%宽度而其余元素为50%宽度,则布局不再使我的元素彼此相邻.我想要的是,当没有100%-width元素时,项目会像他们一样并排显示.

这是一个js小提琴:https://jsfiddle.net/ubmf47s4/2/

    <div id="boxes" class="masonry clearfix">
    <div class="box box-fw" style="background: cyan;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: magenta;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: yellow;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: grey;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj …

我有一个在CMS中使用砌体/包装js插件的砌体网格,用户管理图像非常麻烦,因为它们需要精确的比例才能获得正确的砖效果并填补所有空白,这对于cms的非技术用户更新或更改图像.此插件的初始化速度也很慢.

有没有现代的html解决方案或更新的js插件,现在有更新的技术,如可能flexbox或css网格,这将给我相同的砌体效果,而不必预先定义每个图像的比例,使其成为cms的用户可以只是上传任何大小的图像,它将适合包装布局,而无需定义它在布局中的位置或在上传时调整图像大小？

请注意,这是在自定义cms中,所以我正在寻找不像WordPress那样的cms平台特有的答案.