砌体无限滚动追加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 …
我有以下代码:
$.ajax({
url: API + "item/" + item_id.replace('-',':'),
beforeSend: function(xhr){xhr.setRequestHeader('x-customer', customer);},
format: "json",
success: function( data ){
var template_name = data.source + settings.overlay_style;
$('#modal .modal-content').html(Handlebars.templates[template_name](data));
/* Handle missing avatars */
$('#modal-avatar-image').imagesLoaded()
.progress( function( instance, image ) {
if (!image.isLoaded) {
image.img.src = "/images/404_avatar.svg";
image.img.alt = "The avatar for this user could not be found. Showing placeholder";
image.img.title = "The avatar for this user could not be found. Showing plac eholder";
}
});
/* Handle missing main content */
$('.modal-img').imagesLoaded()
.progress( …我正在使用jQuery Isotope创建一个水平布局,将DIV彼此相邻的100%高度对齐,并将每个DIV中的图像垂直对齐.因此,我称之为Isotope就像这样,Chrome(本地)的一切正常:
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector : '.itemwrap',
layoutMode: 'horizontal',
horizontal: {
verticalAlignment: 0.5
}
});
});
由于图像需要时间加载,它们往往会弄乱Isotope布局,所以我正在尝试使用imagesLoaded修复:http://isotope.metafizzy.co/appendix.html
我实现了这样的修复:
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.itemwrap',
layoutMode: 'horizontal',
horizontal: {
verticalAlignment: 0.5
}
});
});
});
使用此图像加载,同位素不再加载.删除imagesLoaded,Isotope再次启动(但是混乱的布局).有谁知道,错误在哪里？
谢谢!
所以这就是我想要做的.我有一个包含大量图像的网格,所以我使用imagesLoaded库和砌体.
这是我的CSS:
.grid {
opacity:0;
}
和HTML:
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
这是我的JS:
var $container = $('.grid');
// initialize Masonry after all images have loaded
$container.imagesLoaded( function() {
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.item',
gutter: '.gutter-sizer'
});
$container.masonry('on', 'layoutComplete', function(){
console.log('got here');
$container.animate({'opacity':1});
});
});
我的目标是隐藏网格直到所有图像都加载并且布局完成,然后将其淡入.出于某种原因,在上面的代码中,它永远不会进入layoutComplete块.
如果我在imagesLoaded之外移动该块,则$ container.masonry未定义该点.
有任何想法吗？
如果将网格不透明度更改为1,则可以看到所有内容都已正确布局.只是想弄清楚如何调用layoutComplete以将不透明度设置为1.
我正在尝试让Packery/Masonry在一个组件上工作.Packery正在检测容器,但是它的高度为零表示内容未加载,即使我正在使用imagesLoaded.我已经尝试过使用各种生命周期钩子,但它们都有相同的结果,所以有点丢失我错的地方.
import {BlogService} from './blog.service';
import {Blog} from './blog.model';
import {Component, ElementRef, OnInit, AfterViewInit} from '@angular/core';
import {LinkyPipe} from '../pipes/linky.pipe';
declare var Packery: any;
declare var imagesLoaded: any;
@Component({
moduleId: module.id,
selector: 'blog',
templateUrl: 'blog.component.html',
providers: [BlogService],
pipes: [LinkyPipe]
})
export class BlogComponent implements OnInit, AfterViewInit {
blogs: Blog[];
errorMessage: string;
constructor(private _blogService: BlogService, public element: ElementRef) { }
ngOnInit() {
this.getBlogs();
}
ngAfterViewInit() {
let elem = this.element.nativeElement.querySelector('.social-grid');
let pckry;
imagesLoaded(elem, function(instance) {
console.log('loaded');
pckry = new Packery(elem, { …Masonry并且imagesLoaded应该加载并正常工作。已经创建了一个类似的站点，并且它可以正常工作。我不知道我的问题出在哪里，所以我希望你能看到问题。应该少了点什么。
在 Chrome Inspect 中，我收到以下错误：
Uncaught TypeError: $(...).imagesLoaded is not a function
据我了解，这意味着.imagesLoaded并且Masonry应该正确加载？否则我会收到错误$container.imagesLoaded is not a function？
我试过的
标题
<script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/jquery-2.1.4.min.js"></script>
<script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/collection.js"></script>
<?php wp_head(); ?>
HTML
<div class="container">
<div id="masonry-container" class="row nomargin">
<div class="col-md-9">
<div class="item col-lg-4 col-md-4 col-sm-4">
<!--- Content --->
</div>
<div class="item col-lg-4 col-md-4 col-sm-4">
<!--- Content --->
</div>
<div class="item col-lg-4 col-md-4 col-sm-4">
<!--- Content ---> …在 20 分钟之后大约 4 小时，我预计需要使用一些新的 wordpress 主题来设置砌体，我决定最好寻求帮助。
我的 html 模型站点中加载的图像可以正常工作，这是精简的 html 代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="imagesloaded.pkgd.min.js"></script>
<script src="masonry.pkgd.min.js"></script>
</head>
<body>
<div class="masonry-container js-masonry" data-masonry-options='{ "isFitWidth": true }'>
<div class="block-wrapper">content</div>
<div class="block-wrapper">content</div>
<div class="block-wrapper">content</div>
</div><!-- end masonry-container js-masonry -->
<script>
var container = document.querySelector('.masonry-container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
</script>
</body>
</html>
问题：
到目前为止我尝试过的
几乎所有我能想出的东西。（我数了 40 多个打开的选项卡试图找到答案）这是我开始时的简单变化..
在functions.php中（函数中绝对没有其他东西） …
imagesloaded ×7
javascript ×4
jquery ×4
masonry ×3
angular ×1
html ×1
jasmine ×1
packery ×1
wordpress ×1